mirror of
https://github.com/dataease/dataease.git
synced 2025-02-25 12:03:05 +08:00
feat(视图):视图增加表格
This commit is contained in:
junjie
parent
e3099e9cb2
commit
90c406d108
@ -7,7 +7,6 @@ import io.dataease.base.domain.*;
|
||||
import io.dataease.base.mapper.ChartViewMapper;
|
||||
import io.dataease.commons.utils.AuthUtils;
|
||||
import io.dataease.commons.utils.BeanUtils;
|
||||
import io.dataease.commons.utils.CommonBeanFactory;
|
||||
import io.dataease.controller.request.chart.ChartExtFilterRequest;
|
||||
import io.dataease.controller.request.chart.ChartExtRequest;
|
||||
import io.dataease.controller.request.chart.ChartViewRequest;
|
||||
@ -29,6 +28,7 @@ import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.math.BigDecimal;
|
||||
import java.math.RoundingMode;
|
||||
import java.text.MessageFormat;
|
||||
import java.util.*;
|
||||
|
||||
@ -98,8 +98,6 @@ public class ChartViewService {
|
||||
List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
|
||||
}.getType());
|
||||
|
||||
List<String> x = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
@ -162,6 +160,8 @@ public class ChartViewService {
|
||||
}
|
||||
|
||||
// 图表组件可再扩展
|
||||
List<String> x = new ArrayList<>();
|
||||
List<Series> series = new ArrayList<>();
|
||||
for (ChartViewFieldDTO y : yAxis) {
|
||||
Series series1 = new Series();
|
||||
series1.setName(y.getName());
|
||||
@ -188,9 +188,29 @@ public class ChartViewService {
|
||||
}
|
||||
}
|
||||
}
|
||||
// table组件
|
||||
List<ChartViewFieldDTO> fields = new ArrayList<>();
|
||||
List<Map<String, Object>> tableRow = new ArrayList<>();
|
||||
fields.addAll(xAxis);
|
||||
fields.addAll(yAxis);
|
||||
data.forEach(ele -> {
|
||||
Map<String, Object> d = new HashMap<>();
|
||||
for (int i = 0; i < fields.size(); i++) {
|
||||
ChartViewFieldDTO chartViewFieldDTO = fields.get(i);
|
||||
if (chartViewFieldDTO.getDeType() == 0 || chartViewFieldDTO.getDeType() == 1) {
|
||||
d.put(fields.get(i).getOriginName(), ele[i]);
|
||||
} else if (chartViewFieldDTO.getDeType() == 2 || chartViewFieldDTO.getDeType() == 3) {
|
||||
d.put(fields.get(i).getOriginName(), new BigDecimal(ele[i]).setScale(2, RoundingMode.HALF_UP));
|
||||
}
|
||||
}
|
||||
tableRow.add(d);
|
||||
});
|
||||
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
map.put("x", x);
|
||||
map.put("series", series);
|
||||
map.put("fields", fields);
|
||||
map.put("tableRow", tableRow);
|
||||
|
||||
ChartViewDTO dto = new ChartViewDTO();
|
||||
BeanUtils.copyBean(dto, view);
|
||||
@ -259,7 +279,7 @@ public class ChartViewService {
|
||||
String[] field = yAxis.stream().map(y -> "CAST(" + y.getSummary() + "(" + y.getOriginName() + ") AS DECIMAL(20,2)) AS _" + y.getSummary() + "_" + (StringUtils.equalsIgnoreCase(y.getOriginName(), "*") ? "" : y.getOriginName())).toArray(String[]::new);
|
||||
String[] group = xAxis.stream().map(ChartViewFieldDTO::getOriginName).toArray(String[]::new);
|
||||
String[] order = yAxis.stream().filter(y -> StringUtils.isNotEmpty(y.getSort()) && !StringUtils.equalsIgnoreCase(y.getSort(), "none"))
|
||||
.map(y -> "_" + y.getSummary() + "_" + y.getOriginName() + " " + y.getSort()).toArray(String[]::new);
|
||||
.map(y -> "_" + y.getSummary() + "_" + (StringUtils.equalsIgnoreCase(y.getOriginName(), "*") ? "" : y.getOriginName()) + " " + y.getSort()).toArray(String[]::new);
|
||||
|
||||
String sql = MessageFormat.format("SELECT {0},{1} FROM {2} WHERE 1=1 {3} GROUP BY {4} ORDER BY null,{5}",
|
||||
StringUtils.join(group, ","),
|
||||
|
||||
1
frontend/src/icons/svg/table-normal.svg
Normal file
1
frontend/src/icons/svg/table-normal.svg
Normal file
@ -0,0 +1 @@
|
||||
<?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="1619335647805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M975.920762 0H72.46019C45.884952 0 24.380952 24.576 24.380952 54.979048v889.660952C24.380952 975.043048 45.884952 999.619048 72.46019 999.619048h903.460572C1002.496 999.619048 1024 975.043048 1024 944.64V54.979048C1024 24.576 1002.496 0 975.920762 0zM338.066286 925.988571H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714v-194.243047h248.100572v194.218666z m0-258.925714H89.965714V213.991619h248.100572v194.096762z m310.174476 517.851428H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019v-194.243047h248.100572v194.218666z m0-258.925714H400.14019V213.991619h248.100572v194.096762zM958.415238 925.988571H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667v-194.243047H958.415238v194.218666z m0-258.925714H710.314667V213.991619H958.415238v194.096762z" p-id="860"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -21,10 +21,13 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
71
frontend/src/views/chart/components/table/TableNormal.vue
Normal file
71
frontend/src/views/chart/components/table/TableNormal.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<p style="width: 100%;">{{ chart.title }}</p>
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.originName"
|
||||
min-width="200px"
|
||||
:field="field.originName"
|
||||
:resizable="true"
|
||||
sortable
|
||||
:title="field.name"
|
||||
>
|
||||
<!-- <template slot="header">-->
|
||||
<!-- <span>{{ field.name }}</span>-->
|
||||
<!-- </template>-->
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableNormal',
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
height: 500
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chart() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
||||
const datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -114,7 +114,7 @@
|
||||
<el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
|
||||
<el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" 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>
|
||||
@ -195,7 +195,8 @@
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
<chart-component :chart-id="chart.id" :chart="chart" class="chart-class" />
|
||||
<chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
|
||||
<table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" />
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -262,10 +263,11 @@ import XAxisSelector from '../components/component-style/XAxisSelector'
|
||||
import YAxisSelector from '../components/component-style/YAxisSelector'
|
||||
import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
|
||||
import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
|
||||
import TableNormal from '../components/table/TableNormal'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: { DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
||||
components: { TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user