feat: 仪表板选择视图

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewMapper.java

+package io.dataease.base.mapper.ext;
+
+import io.dataease.base.mapper.ext.query.GridExample;
+import io.dataease.dto.panel.po.PanelViewPo;
+
+import java.util.List;
+
+public interface ExtPanelViewMapper {
+
+    List<PanelViewPo> groups(GridExample example);
+
+    List<PanelViewPo> views(GridExample example);
+}

backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewMapper.xml

+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="io.dataease.base.mapper.ext.ExtPanelViewMapper">
+
+    <resultMap id="treeNodeMap" type="io.dataease.dto.panel.po.PanelViewPo">
+        <id column="id" property="id" />
+        <result column="name" property="name" />
+        <result column="pid" property="pid" />
+        <result column="type" property="type" />
+    </resultMap>
+
+
+
+    <select id="groups" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="treeNodeMap">
+        select id, pid,  name, `type`
+        from chart_group
+        <if test="_parameter != null">
+            <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
+        </if>
+        <if test="orderByClause != null">
+            order by ${orderByClause}
+        </if>
+        <if test="orderByClause == null">
+            order by create_time desc
+        </if>
+    </select>
+
+    <select id="views" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="treeNodeMap">
+        select id, scene_id  as pid ,title  as name, `type`
+        from chart_view
+        <if test="_parameter != null">
+            <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
+        </if>
+        <if test="orderByClause != null">
+            order by ${orderByClause}
+        </if>
+        <if test="orderByClause == null">
+            order by create_time desc
+        </if>
+    </select>
+
+
+
+
+
+
+</mapper>

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

+package io.dataease.controller.panel.api;
+
+
+import io.dataease.controller.sys.base.BaseGridRequest;
+import io.dataease.dto.panel.PanelViewDto;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import java.util.List;
+
+@Api(tags = "仪表板：视图管理")
+@RequestMapping("/api/panelView")
+public interface ViewApi {
+
+
+    @ApiOperation("视图树")
+    @PostMapping("/tree")
+    List<PanelViewDto> tree(BaseGridRequest request);
+}

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

+package io.dataease.controller.panel.server;
+
+import io.dataease.commons.utils.AuthUtils;
+import io.dataease.controller.panel.api.ViewApi;
+import io.dataease.controller.sys.base.BaseGridRequest;
+import io.dataease.controller.sys.base.ConditionEntity;
+import io.dataease.dto.panel.PanelViewDto;
+import io.dataease.dto.panel.po.PanelViewPo;
+import io.dataease.service.panel.PanelViewService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@RestController
+public class ViewServer implements ViewApi {
+
+    @Autowired
+    private PanelViewService panelViewService;
+
+    /**
+     * 为什么查两次？
+     * 因为left join 会导致全表扫描
+     * 查两次在索引合理情况下 效率比查询一次高
+     * @return
+     */
+    @Override
+    public List<PanelViewDto> tree(@RequestBody BaseGridRequest request) {
+        List<ConditionEntity> conditions = new ArrayList<>();
+        ConditionEntity condition = new ConditionEntity();
+        condition.setField("create_by");
+        condition.setOperator("eq");
+        condition.setValue(AuthUtils.getUser().getUsername());
+        conditions.add(condition);
+        request.setConditions(conditions);
+        List<PanelViewPo> groups = panelViewService.groups(request);
+        List<PanelViewPo> views = panelViewService.views(request);
+        List<PanelViewDto> panelViewDtos = panelViewService.buildTree(groups, views);
+        return panelViewDtos;
+    }
+}

backend/src/main/java/io/dataease/dto/panel/PanelViewDto.java

+package io.dataease.dto.panel;
+
+import lombok.Data;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Optional;
+
+@Data
+public class PanelViewDto {
+
+    private String id;
+
+    private String pid;
+
+    private String type;
+
+    private String name;
+
+    private List<PanelViewDto> children;
+
+    public void addChild(PanelViewDto dto){
+        children = Optional.ofNullable(children).orElse(new ArrayList<>());
+        children.add(dto);
+    }
+}

backend/src/main/java/io/dataease/dto/panel/po/PanelViewPo.java

+package io.dataease.dto.panel.po;
+
+import lombok.Data;
+
+@Data
+public class PanelViewPo {
+
+    private String id;
+
+    private String pid;
+
+    private String type;
+
+    private String name;
+}

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

+package io.dataease.service.panel;
+
+import io.dataease.base.mapper.ext.ExtPanelViewMapper;
+import io.dataease.base.mapper.ext.query.GridExample;
+import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.sys.base.BaseGridRequest;
+import io.dataease.dto.panel.PanelViewDto;
+import io.dataease.dto.panel.po.PanelViewPo;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+import java.util.stream.Collectors;
+
+@Service
+public class PanelViewService {
+
+    @Autowired(required = false)
+    private ExtPanelViewMapper extPanelViewMapper;
+
+    private final static String SCENE_TYPE = "scene";
+
+    public List<PanelViewPo> groups(BaseGridRequest request){
+        GridExample example = request.convertExample();
+        return extPanelViewMapper.groups(example);
+    }
+
+    public List<PanelViewPo> views(BaseGridRequest request){
+        GridExample example = request.convertExample();
+        return extPanelViewMapper.views(example);
+    }
+
+    public List<PanelViewDto> buildTree(List<PanelViewPo> groups, List<PanelViewPo> views){
+
+        if (CollectionUtils.isEmpty(groups) || CollectionUtils.isEmpty(views)) return null;
+
+        Map<String, List<PanelViewPo>> viewsMap = views.stream().collect(Collectors.groupingBy(PanelViewPo::getPid));
+        List<PanelViewDto> dtos = groups.stream().map(group -> BeanUtils.copyBean(new PanelViewDto(), group)).collect(Collectors.toList());
+        List<PanelViewDto> roots = new ArrayList<>();
+        dtos.forEach(group -> {
+            // 查找跟节点
+            if (ObjectUtils.isEmpty(group.getPid())){
+                roots.add(group);
+            }
+            // 查找当前节点的子节点
+            // 当前group是场景
+            if (StringUtils.equals(group.getType(), SCENE_TYPE)){
+                Optional.ofNullable(viewsMap.get(group.getId())).ifPresent(lists -> lists.forEach(view -> {
+                    PanelViewDto dto = BeanUtils.copyBean(new PanelViewDto(), view);
+                    group.addChild(dto);
+                }));
+                return;
+            }
+            // 当前group是分组
+            dtos.forEach(item -> {
+                if (StringUtils.equals(item.getPid(), group.getId())){
+                    group.addChild(item);
+                }
+            });
+        });
+        // 最后 没有孩子的老东西淘汰
+        return roots.stream().filter(item -> CollectionUtils.isNotEmpty(item.getChildren())).collect(Collectors.toList());
+    }
+}

frontend/src/api/panel/view.js

+import request from '@/utils/request'
+
+export function tree(data) {
+  return request({
+    url: '/api/panelView/tree',
+    method: 'post',
+    loading: true,
+    data
+  })
+}

frontend/src/views/panel/ViewSelect/index.vue

+<template>
+  <div>
+    <div class="my-top">
+      <el-input
+        v-model="filterText"
+        placeholder="按名称搜索"
+      />
+      <el-tree
+        ref="tree"
+        class="filter-tree"
+        :data="data"
+        :props="defaultProps"
+        :render-content="renderNode"
+        default-expand-all
+        :filter-node-method="filterNode"
+      />
+    </div>
+    <div v-if="showdetail" class="detail-class">
+      <el-card class="filter-card-class">
+        <div slot="header" class="button-div-class">
+          <span>{{ detailItem.name }}</span>
+          <div style="float: right; padding: 1px 5px; cursor:pointer; " @click="closeDetail">
+            <i class="el-icon-close" />
+          </div>
+        </div>
+        <img class="view-list-thumbnails" :src="'/common-files/images/'+detailItem.id+'/VIEW_DEFAULT_IMAGE'" alt="">
+      </el-card>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { tree } from '@/api/panel/view'
+import { addClass, removeClass } from '@/utils'
+export default {
+  name: 'ViewSelect',
+  data() {
+    return {
+      filterText: null,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      data: [],
+      showdetail: false,
+      detailItem: null
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val)
+    },
+    showdetail(val) {
+      const dom = document.querySelector('.my-top')
+      if (val) {
+        addClass(dom, 'top-div-class')
+      } else {
+        removeClass(dom, 'top-div-class')
+      }
+    }
+  },
+  created() {
+    this.loadData()
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    loadData() {
+      const param = {}
+      tree(param).then(res => {
+        let arr = []
+        for (let index = 0; index < 10; index++) {
+          arr = arr.concat(res.data)
+        }
+        this.data = arr
+      })
+    },
+    renderNode(h, { node, data, store }) {
+      return (
+        <div class='custom-tree-node' on-click={() => this.detail(data)} >
+          <span class='label-span'>{node.label}</span>
+          {data.type !== 'group' && data.type !== 'scene' ? (
+
+            <svg-icon icon-class={data.type} class='chart-icon' />
+          ) : (
+            ''
+          )}
+        </div>
+      )
+    },
+    detail(data) {
+      this.showdetail = true
+      this.detailItem = data
+    },
+    closeDetail() {
+      this.showdetail = false
+      this.detailItem = null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top-div-class {
+    max-height: calc(100vh - 335px);
+    width: 100%;
+    position: fixed;
+    overflow-y : auto
+}
+.detail-class {
+    width: 100%;
+    position: fixed;
+    bottom: 0px;
+}
+.view-list-thumbnails {
+    width: 100%;
+    height: 100%;
+}
+</style>

frontend/src/views/panel/edit/index.vue

@@ -73,7 +73,8 @@
           <div v-if="show" class="leftPanel">
 
             <div class="leftPanel-items">
-              <filter-group />
+              <view-select v-if="show && showIndex===0" />
+              <filter-group v-if="show && showIndex===1" />
             </div>
           </div>
         </div>
@@ -92,6 +93,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import { addClass, removeClass } from '@/utils'
 import FilterGroup from '../filter'
+import ViewSelect from '../ViewSelect'
 import DrawingBoard from '../DrawingBoard'
 export default {
   components: {
@@ -99,13 +101,15 @@ export default {
     DeContainer,
     DeAsideContainer,
     FilterGroup,
+    ViewSelect,
     DrawingBoard
 
   },
   data() {
     return {
       show: false,
-      clickNotClose: false
+      clickNotClose: false,
+      showIndex: -1
     }
   },
   watch: {
@@ -136,6 +140,7 @@ export default {
     },
     showPanel(type) {
       this.show = !this.show
+      this.showIndex = type
     },
     addEventClick() {
       window.addEventListener('click', this.closeSidebar)
@@ -146,6 +151,7 @@ export default {
       if (!parent && !self) {
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
+        this.showIndex = -1
       }
     },
     insertToBody() {