feat(dashboard):仪表盘 Table Label支持，大小自适应；收藏取消bug fix

backend/src/main/java/io/dataease/controller/panel/api/StoreApi.java

@@ -31,6 +31,6 @@ public interface StoreApi {
 
     @ApiOperation("移除收藏")
     @PostMapping("/remove/{storeId}")
-    void remove(@PathVariable("storeId") Long storeId);
+    void remove(@PathVariable("storeId") String storeId);
 
 }

backend/src/main/java/io/dataease/controller/panel/server/StoreServer.java

@@ -16,7 +16,7 @@ public class StoreServer implements StoreApi {
     private StoreService storeService;
 
     @Override
-    public void store( String id) {
+    public void store(String id) {
         storeService.save(id);
     }
 
@@ -26,7 +26,12 @@ public class StoreServer implements StoreApi {
     }
 
     @Override
-    public void remove( Long storeId) {
-        storeService.remove(storeId);
+    public void remove(String storeId) {
+        try {
+            Long id = Long.parseLong(storeId);
+            storeService.remove(id);
+        } catch (Exception e) {
+            storeService.removeByPanelId(storeId);
+        }
     }
 }

backend/src/main/java/io/dataease/service/panel/StoreService.java

 package io.dataease.service.panel;
 
 import io.dataease.base.domain.PanelStore;
+import io.dataease.base.domain.PanelStoreExample;
 import io.dataease.base.mapper.PanelStoreMapper;
 import io.dataease.base.mapper.ext.ExtPanelStoreMapper;
 import io.dataease.base.mapper.ext.query.GridExample;
@@ -9,6 +10,7 @@ import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.dto.panel.PanelStoreDto;
 import org.springframework.stereotype.Service;
+
 import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
@@ -22,7 +24,7 @@ public class StoreService {
     @Resource
     private ExtPanelStoreMapper extPanelStoreMapper;
 
-    public void save(String panelGroupId){
+    public void save(String panelGroupId) {
         Long userId = AuthUtils.getUser().getUserId();
         PanelStore panelStore = new PanelStore();
         panelStore.setCreateTime(System.currentTimeMillis());
@@ -31,24 +33,31 @@ public class StoreService {
         panelStoreMapper.insert(panelStore);
     }
 
+    public void removeByPanelId(String panelId) {
+        PanelStoreExample panelStoreExample = new PanelStoreExample();
+        panelStoreExample.createCriteria().andPanelGroupIdEqualTo(panelId);
+        panelStoreMapper.deleteByExample(panelStoreExample);
+    }
 
-
-    public void remove(Long storeId){
+    public void remove(Long storeId) {
         panelStoreMapper.deleteByPrimaryKey(storeId);
     }
 
     /**
      * 按照当前用户ID查询收藏仪表板
+     *
      * @param request
      * @return
      */
-    public List<PanelStoreDto> query(BaseGridRequest request){
+    public List<PanelStoreDto> query(BaseGridRequest request) {
         Long userId = AuthUtils.getUser().getUserId();
         ConditionEntity condition = new ConditionEntity();
         condition.setField("s.user_id");
         condition.setOperator("eq");
         condition.setValue(userId);
-        request.setConditions(new ArrayList<ConditionEntity>(){{add(condition);}});
+        request.setConditions(new ArrayList<ConditionEntity>() {{
+            add(condition);
+        }});
         GridExample example = request.convertExample();
         List<PanelStoreDto> stores = extPanelStoreMapper.query(example);
         return stores;

frontend/src/components/canvas/custom-component/UserView.vue

@@ -6,8 +6,9 @@
         {{ message }}
       </div>
     </div>
-    <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
-    <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+    <chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
+    <table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
+    <label-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
   </div>
 </template>
 
@@ -16,6 +17,7 @@
 import { viewData } from '@/api/panel/panel'
 import ChartComponent from '@/views/chart/components/ChartComponent.vue'
 import TableNormal from '@/views/chart/components/table/TableNormal'
+import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
 
 import { mapState } from 'vuex'
 
@@ -33,7 +35,7 @@ import {
 
 export default {
   name: 'UserView',
-  components: { ChartComponent, TableNormal },
+  components: { ChartComponent, TableNormal, LabelNormal },
   props: {
     element: {
       type: Object

frontend/src/lang/zh.js

@@ -87,6 +87,7 @@ export default {
     password_error: '密码不小于6位'
   },
   commons: {
+    close: '关闭',
     icon: '图标',
     all: '全部',
     enable: '启用',

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -20,6 +20,7 @@
 
 <script>
 import { hexColorToRGBA } from '../../chart/util'
+import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'LabelNormal',
@@ -83,6 +84,10 @@ export default {
   mounted() {
     this.init()
     this.calcHeight()
+    // 监听元素变动事件
+    eventBus.$on('resizing', (componentId) => {
+      this.chartResize()
+    })
   },
   methods: {
     init() {
@@ -94,14 +99,14 @@ export default {
     },
     calcHeight() {
       const that = this
-      setTimeout(function() {
-        // const currentHeight = document.documentElement.clientHeight
-        // const tableMaxHeight = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 20
-        const currentHeight = that.$refs.tableContainer.offsetHeight
-        const contentHeight = currentHeight - that.$refs.title.offsetHeight
-        that.height = contentHeight + 'px'
-        that.content_class.height = that.height
-      }, 10)
+      this.$nextTick(function() {
+        if (that.$refs.tableContainer) {
+          const currentHeight = that.$refs.tableContainer.offsetHeight
+          const contentHeight = currentHeight - that.$refs.title.offsetHeight
+          that.height = contentHeight + 'px'
+          that.content_class.height = that.height
+        }
+      })
     },
     initStyle() {
       if (this.chart.customAttr) {
@@ -135,6 +140,10 @@ export default {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
         }
       }
+    },
+    chartResize() {
+      // 指定图表的配置项和数据
+      this.calcHeight()
     }
   }
 }

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

@@ -33,6 +33,7 @@
 
 <script>
 import { hexColorToRGBA } from '../../chart/util'
+import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'TableNormal',
@@ -91,6 +92,10 @@ export default {
   mounted() {
     this.init()
     this.calcHeight()
+    // 监听元素变动事件
+    eventBus.$on('resizing', (componentId) => {
+      this.chartResize()
+    })
   },
   methods: {
     init() {
@@ -111,23 +116,23 @@ export default {
     },
     calcHeight() {
       const that = this
-      setTimeout(function() {
-        // const currentHeight = document.documentElement.clientHeight
-        // const tableMaxHeight = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 20
-        const currentHeight = that.$refs.tableContainer.offsetHeight
-        const tableMaxHeight = currentHeight - that.$refs.title.offsetHeight
-        let tableHeight
-        if (that.chart.data) {
-          tableHeight = (that.chart.data.tableRow.length + 2) * 36
-        } else {
-          tableHeight = 0
-        }
-        if (tableHeight > tableMaxHeight) {
-          that.height = tableMaxHeight + 'px'
-        } else {
-          that.height = 'auto'
+      this.$nextTick(function() {
+        if (that.$refs.tableContainer) {
+          const currentHeight = that.$refs.tableContainer.offsetHeight
+          const tableMaxHeight = currentHeight - that.$refs.title.offsetHeight
+          let tableHeight
+          if (that.chart.data) {
+            tableHeight = (that.chart.data.tableRow.length + 2) * 36
+          } else {
+            tableHeight = 0
+          }
+          if (tableHeight > tableMaxHeight) {
+            that.height = tableMaxHeight + 'px'
+          } else {
+            that.height = 'auto'
+          }
         }
-      }, 10)
+      })
     },
     initStyle() {
       if (this.chart.customAttr) {
@@ -207,6 +212,11 @@ export default {
       })
       // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
       return [means]
+    },
+
+    chartResize() {
+      // 指定图表的配置项和数据
+      this.calcHeight()
     }
   }
 }