feat(视图):视图增加表格

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -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, ","),

frontend/src/icons/svg/table-normal.svg

@@ -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>

frontend/src/views/chart/components/ChartComponent.vue

@@ -21,10 +21,13 @@ export default {
       type: Object,
       required: true
     },
-  filter: {
+    filter: {
-    type: Object,
+      type: Object,
-    required: false
+      required: false,
-  }
+      default: function() {
+        return {}
+      }
+    }
   },
   data() {
     return {

frontend/src/views/chart/components/table/TableNormal.vue

@@ -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>

frontend/src/views/chart/view/ChartEdit.vue

@@ -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,