Skip to content

D
dataease
Unverified 提交 a3052e1b authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

Merge pull request #1750 from dataease/pr@dev@feat_view_plugin

feat: 新增气泡地图插件兼容
上级 de83d6e7 60fa4e1c
隐藏空白字符变更
内嵌 并排
正在显示 包含 764 行增加 和 748 行删除
backend/pom.xml
浏览文件 @ a3052e1b
......@@ -216,6 +216,11 @@
<artifactId>dataease-plugin-interface</artifactId>
<version>1.7</version>
</dependency>
<dependency>
<groupId>io.dataease</groupId>
<artifactId>dataease-plugin-view</artifactId>
<version>1.7</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
......
backend/src/main/java/io/dataease/plugins/server/view/PluginViewServer.java 0 → 100644
浏览文件 @ a3052e1b
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;
}
}
frontend/src/api/chart/chart.js
浏览文件 @ a3052e1b
......@@ -69,3 +69,10 @@ export function ajaxGetDataOnly(id, data) {
data
})
}
export function pluginTypes() {
return request({
url: '/plugin/view/types',
method: 'post'
})
}
frontend/src/icons/svg/buddle-map.svg 0 → 100644
浏览文件 @ a3052e1b
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1644388374047" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4486" xmlns:xlink="http://www.w3.org/1999/xlink" width="254.4921875" height="200"><defs><style type="text/css"></style></defs><path d="M1303.272727 188.881455V82.106182h-8.704l-30.394182 32.861091c-4.328727 4.096-8.704 4.096-13.032727 4.096h-13.032727c-4.328727 0-13.032727-4.096-13.032727-8.192l-21.736728-16.430546c-4.328727-4.096-8.657455-8.238545-13.032727-8.238545h-26.065454c-4.328727 0-13.032727-4.096-17.361455-8.192L1099.077818 12.334545c-4.328727-4.142545-8.657455-8.238545-13.032727-8.238545L1055.650909 0h-8.704l-47.755636 16.430545v24.669091l-8.704 53.341091c0 4.096-4.328727 8.192-4.328728 8.192L977.454545 110.871273c-4.328727 4.096-8.704 4.096-13.032727 4.096h-8.704c-8.657455 0-17.361455 4.096-17.361454 12.334545l-8.704 20.48a18.199273 18.199273 0 0 0 17.408 24.669091h21.690181l17.408-12.334545 13.032728 8.238545c8.657455 8.192 4.328727 24.669091-8.704 28.718546l-39.098182 12.334545v24.669091h-39.098182l-8.704 24.622545-34.722909-4.142545c-8.704 0-13.032727 4.142545-17.408 8.238545l-8.657455 12.288 13.032728 12.334546-34.769455 36.957091c-4.328727 4.096-8.704 4.096-13.032727 4.096h-52.130909c-4.328727 0-8.704 0-13.032727 4.096l-13.032728 12.334545c-4.328727 4.096-8.704 4.096-13.032727 4.096h-39.098182c-4.328727 0-8.704 0-13.032727-4.096l-26.065455-20.526545c-4.328727 0-4.328727-4.096-8.704-4.096l-95.557818-4.096c-4.328727 0-8.704-4.142545-13.032727-8.238546l-52.130909-65.675636c-4.328727-4.142545-8.704-8.238545-13.032727-8.238546h-4.328728c-8.704 0-17.408-8.192-17.408-16.430545v-28.718545l-4.328727-24.669091c0-4.096-4.328727-8.192-8.704-12.288H390.981818c-4.328727 0-8.704-4.096-8.704-8.238546l-8.657454-24.622545H351.883636l-13.032727 16.430545h-21.736727v20.526546H273.687273c-4.328727 0-13.032727 4.096-13.032728 8.238545l-17.361454 24.622546c-4.375273 4.096-8.704 8.192-17.408 8.192h-21.690182c-8.704 0-17.408 8.238545-17.408 16.430545v24.669091c0 4.096 0 8.192-4.328727 8.192l-13.032727 20.48c-4.328727 4.189091-4.328727 8.238545-13.032728 8.238545l-47.802182 12.334546H34.769455c-4.375273 0-8.704 4.096-13.032728 4.096l-13.032727 16.430545C0 320.279273 0 324.421818 0 328.471273v20.526545h17.361455V414.72c0 4.096 4.375273 8.192 8.704 12.288l30.394181 24.669091c4.375273 4.096 4.375273 4.096 4.375273 8.192l8.657455 28.765091v53.341091H52.130909v32.861091c0 4.096 4.328727 8.192 4.328727 12.334545l39.098182 32.814546h21.736727l86.900364 82.152727 4.328727 4.096 73.867637 28.718545 13.032727-16.384h26.065455c8.657455 0 13.032727 4.096 17.361454 8.192l13.032727 24.669091c4.328727 4.049455 8.704 8.192 17.361455 8.192H390.981818c4.328727 0 4.328727 0 8.704-4.142545l43.426909-24.622546c4.328727-4.096 13.032727-4.096 17.361455 0l39.098182 16.430546v-16.430546h21.736727l8.704 24.669091v36.910546c0 4.142545 0 8.238545-4.375273 12.334545l-21.690182 20.526546v20.526545l17.361455 4.096c4.328727 0 13.032727 4.142545 13.032727 12.334545l4.328727 12.334546v28.718545l43.473455 28.765091a13.824 13.824 0 0 0 8.657455 4.096h8.704c8.704 0 17.361455-8.238545 17.361454-16.430545s8.704-16.430545 17.408-16.430546h43.426909c4.328727 0 8.704 0 13.032727-4.096l13.032728-8.192c8.704-4.142545 17.361455-4.142545 26.065454 4.096l30.394182 32.814546c4.375273 4.142545 8.704 8.238545 13.032727 8.238545h52.130909l4.375273 20.526546-30.440727 32.861091v20.48l21.736727 12.334545c8.704 4.142545 21.736727 0 26.065455-8.192l21.736727-28.765091c4.328727-4.096 4.328727-8.192 4.328727-12.288l-4.328727-28.765091c0-8.192 4.328727-20.48 13.032727-20.48l30.394182-8.238545h8.704l17.361455 4.096 21.736727-8.192 4.328727-20.526546c0-8.238545 8.704-12.334545 13.032727-12.334545l26.065455-8.238546c4.328727 0 4.328727 0 8.704-4.096l82.525091-69.818181c4.328727-4.096 4.328727-4.096 4.328727-8.192l13.032727-61.579637c0-4.096 4.375273-8.192 8.704-12.334545l21.736728-12.288c4.328727-4.142545 8.657455-12.334545 8.657454-16.430546l-8.657454-73.914181c0-4.096-4.375273-8.192-8.704-12.334546l-17.361455-12.288c-4.375273-4.142545-8.704-8.238545-8.704-12.334545l-4.328727-16.430546c0-4.096-4.375273-8.192-8.704-12.288l-30.394182-24.669091c-8.704-4.096-8.704-16.430545-4.375273-24.622545l17.408-28.765091c0-4.096 4.328727-4.096 8.657455-8.192l34.769454-12.334546v-20.48h-34.769454c-4.328727 0-13.032727 4.096-17.361455 8.192l-13.032727 16.430546-13.032727 12.288-4.328727-20.48-30.440728-8.238546L1081.716364 344.901818l8.704 12.334546v24.622545c0 4.096 0 12.334545 4.328727 12.334546l4.328727 4.096a29.090909 29.090909 0 0 0 26.065455 0l60.834909-57.483637c4.328727-4.096 4.328727-8.238545 4.328727-16.430545l-4.328727-16.430546 39.098182-4.096c4.328727 0 8.704-4.096 13.032727-4.096l34.769454-32.861091c4.328727-4.096 8.657455-12.334545 4.328728-20.526545l-21.736728-45.149091 17.408-16.430545H1303.272727v4.096z" fill="#C1CADC" p-id="4487"></path><path d="M407.272727 551.377455a22.481455 22.481455 0 0 1-17.221818-8.378182c-0.791273-0.930909-1.768727-1.954909-2.792727-3.211637a482.397091 482.397091 0 0 1-29.323637-37.236363 302.917818 302.917818 0 0 1-18.01309-28.392728C330.565818 457.122909 325.818182 442.973091 325.818182 432.128c0-10.472727 2.141091-20.619636 6.376727-30.208 4.096-9.216 10.007273-17.547636 17.454546-24.669091 7.447273-7.121455 16.197818-12.706909 25.879272-16.616727a84.526545 84.526545 0 0 1 63.488 0c9.681455 3.909818 18.385455 9.495273 25.879273 16.616727 7.447273 7.121455 13.358545 15.453091 17.454545 24.669091 4.189091 9.588364 6.376727 19.735273 6.376728 30.254545 0 10.798545-4.747636 24.948364-14.103273 41.984a298.542545 298.542545 0 0 1-17.966545 28.392728 469.504 469.504 0 0 1-29.323637 37.236363l-2.699636 3.025455a22.714182 22.714182 0 0 1-17.268364 8.564364H407.272727zM672.023273 787.688727a16.523636 16.523636 0 0 1-12.939637-6.702545l-2.094545-2.56a384.186182 384.186182 0 0 1-22.016-29.789091 245.154909 245.154909 0 0 1-13.498182-22.714182c-6.981818-13.637818-10.565818-24.948364-10.565818-33.652364a62.510545 62.510545 0 0 1 37.282909-57.204363c7.540364-3.258182 15.546182-4.887273 23.784727-4.933818h0.046546a59.950545 59.950545 0 0 1 43.194182 18.245818 61.998545 61.998545 0 0 1 17.873454 43.892363c0 8.704-3.537455 20.014545-10.565818 33.652364-3.630545 6.981818-8.145455 14.615273-13.498182 22.714182a373.946182 373.946182 0 0 1-22.016 29.789091l-2.001454 2.420363a16.663273 16.663273 0 0 1-12.939637 6.842182h-0.093091zM896 669.556364a34.676364 34.676364 0 0 1-25.786182-11.729455l-4.235636-4.514909a682.961455 682.961455 0 0 1-44.032-52.130909 421.143273 421.143273 0 0 1-26.996364-39.749818c-14.010182-23.877818-21.131636-43.659636-21.131636-58.833455 0-14.661818 3.258182-28.858182 9.588363-42.263273a108.916364 108.916364 0 0 1 26.158546-34.583272c11.217455-9.960727 24.296727-17.826909 38.865454-23.272728a134.795636 134.795636 0 0 1 47.569455-8.610909h0.046545c16.523636 0 32.488727 2.885818 47.569455 8.610909 14.568727 5.445818 27.601455 13.312 38.818909 23.272728 11.170909 10.007273 20.014545 21.597091 26.205091 34.583272 6.330182 13.358545 9.541818 27.601455 9.541818 42.263273 0 15.173818-7.121455 34.955636-21.131636 58.833455-7.214545 12.241455-16.290909 25.6-26.996364 39.703272a664.715636 664.715636 0 0 1-44.032 52.177455l-3.956363 4.235636a35.002182 35.002182 0 0 1-25.925819 12.008728h-0.139636z" fill="#8A90A2" p-id="4488"></path><path d="M1066.356364 850.385455c0 2.932364-7.447273 2.932364-7.447273 5.864727v23.319273c0 2.932364 0 5.864727 7.447273 8.750545l29.556363 17.547636 22.248728-11.682909c0-2.932364 7.400727-2.932364 7.400727-5.864727l14.801454-61.253818h-37.050181l-37.003637 23.365818z" fill="#C1CADC" p-id="4489"></path></svg>
\ No newline at end of file
frontend/src/main.js
浏览文件 @ a3052e1b
......@@ -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'
......
frontend/src/views/chart/chart/util.js
浏览文件 @ a3052e1b
......@@ -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'
}
]
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ a3052e1b
......@@ -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)"
>
<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)"
>
<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)"
<!--xAxisExt-->
<el-row
v-if="view.type === 'table-pivot'"
class="padding-lr"
>
<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)"
<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">
<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)"
<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">
<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 => {
......
frontend/src/views/chart/view/ChartType.vue
浏览文件 @ a3052e1b
<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>
<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>
<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>
</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>
<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_distribute') }}</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="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" />
<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_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>
<p class="radio-label">{{ $t(item.title) }}</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>
......
frontend/src/views/system/plugin/PluginCom.vue
浏览文件 @ a3052e1b
<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)
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论