feat:修改仪表盘编辑侧边弹框样式

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

@@ -12,7 +12,7 @@
     </select>
 
     <select id="panelGroupList" resultMap="BaseResultMapDTO">
-        select panel_group.*,panel_group.name as label from panel_group
+        select id, `name`, pid, `level`, node_type, create_by, create_time, panel_type,`name` as label from panel_group
         <where>
             <if test="name != null">
                 and panel_group.name like CONCAT('%', #{name},'%')

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

@@ -2,11 +2,12 @@ package io.dataease.controller.panel.api;
 
 
 import io.dataease.base.domain.ChartView;
+import io.dataease.base.domain.ChartViewWithBLOBs;
 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.PathVariable;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
@@ -26,6 +27,10 @@ public interface ViewApi {
     @PostMapping("/viewsWithIds")
     List<ChartView> viewsWithIds(List<String> viewIds);
 
+    @ApiOperation("获取单个视图")
+    @GetMapping("/findOne/{id}")
+    ChartViewWithBLOBs findOne(String id);
+
 
 
 

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

@@ -1,6 +1,7 @@
 package io.dataease.controller.panel.server;
 
 import io.dataease.base.domain.ChartView;
+import io.dataease.base.domain.ChartViewWithBLOBs;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.panel.api.ViewApi;
 import io.dataease.controller.sys.base.BaseGridRequest;
@@ -49,7 +50,11 @@ public class ViewServer implements ViewApi {
 
     @Override
     public List<ChartView> viewsWithIds(@RequestBody List<String> viewIds) {
-
         return chartViewService.viewsByIds(viewIds);
     }
+
+    @Override
+    public ChartViewWithBLOBs findOne(@PathVariable String id) {
+        return chartViewService.findOne(id);
+    }
 }

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

@@ -392,4 +392,8 @@ public class ChartViewService {
         example.createCriteria().andIdIn(viewIds);
         return chartViewMapper.selectByExample(example);
     }
+
+    public ChartViewWithBLOBs findOne(String id) {
+        return chartViewMapper.selectByPrimaryKey(id);
+    }
 }

frontend/src/api/panel/view.js

@@ -17,3 +17,12 @@ export function viewsWithIds(data) {
     data
   })
 }
+
+export function findOne(id) {
+  return request({
+    url: '/api/panelView/findOne/' + id,
+    method: 'get',
+    loading: true
+  })
+}
+

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

@@ -434,14 +434,6 @@ export default {
         if (getData) {
           this.getData(response.data.id)
         } else {
-          debugger
-          html2canvas(this.$refs.imageWrapper).then(canvas => {
-            const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
-            if (snapshot !== '') {
-              view.snapshot = snapshot
-              post('/chart/view/save', view)
-            }
-          })
           this.getChart(response.data.id)
         }
 
@@ -450,6 +442,54 @@ export default {
       })
     },
     closeEdit() {
+      html2canvas(this.$refs.imageWrapper).then(canvas => {
+        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
+        if (snapshot !== '') {
+          const view = JSON.parse(JSON.stringify(this.view))
+          view.id = this.view.id
+          view.sceneId = this.view.sceneId
+          view.name = this.view.name ? this.view.name : this.table.name
+          view.tableId = this.view.tableId
+          view.xaxis.forEach(function(ele) {
+            // if (!ele.summary || ele.summary === '') {
+            //   ele.summary = 'sum'
+            // }
+            if (!ele.sort || ele.sort === '') {
+              ele.sort = 'none'
+            }
+            if (!ele.filter) {
+              ele.filter = []
+            }
+          })
+          view.yaxis.forEach(function(ele) {
+            if (!ele.summary || ele.summary === '') {
+              if (ele.id === 'count') {
+                ele.summary = 'count'
+              } else {
+                ele.summary = 'sum'
+              }
+            }
+            if (!ele.sort || ele.sort === '') {
+              ele.sort = 'none'
+            }
+            if (!ele.filter) {
+              ele.filter = []
+            }
+          })
+          if (view.type.startsWith('pie') || view.type.startsWith('funnel')) {
+            if (view.yaxis.length > 1) {
+              view.yaxis.splice(1, view.yaxis.length)
+            }
+          }
+          view.xaxis = JSON.stringify(view.xaxis)
+          view.yaxis = JSON.stringify(view.yaxis)
+          view.customAttr = JSON.stringify(view.customAttr)
+          view.customStyle = JSON.stringify(view.customStyle)
+          view.customFilter = JSON.stringify(view.customFilter)
+          view.snapshot = snapshot
+          post('/chart/view/save', view)
+        }
+      })
       // 从仪表盘入口关闭
       bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
       this.$emit('switchComponent', { name: '' })

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

@@ -1,43 +1,67 @@
 <template>
-  <div>
+  <el-col>
-    <div class="my-top">
+    <el-row style="margin-top: 5px">
+      <el-row style="margin-left: 5px;margin-right: 5px">
         <el-input
-        v-model="filterText"
+          v-model="templateFilterText"
-        placeholder="按名称搜索"
+          placeholder="输入关键字进行过滤"
+          size="mini"
+          clearable
+          prefix-icon="el-icon-search"
         />
+      </el-row>
+      <el-row style="margin-top: 5px">
         <el-tree
-        ref="tree"
+          ref="templateTree"
-        class="filter-tree"
+          :default-expanded-keys="defaultExpandedKeys"
           :data="data"
+          node-key="id"
           :props="defaultProps"
-        :render-content="renderNode"
           draggable
           :allow-drop="allowDrop"
           :allow-drag="allowDrag"
+          :expand-on-click-node="true"
           :filter-node-method="filterNode"
+          :highlight-current="true"
           @node-drag-start="handleDragStart"
+          @node-click="nodeClick"
+        >
+          <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span>
+              <span v-if="data.type==='scene'">
+                <el-button
+                  icon="el-icon-folder"
+                  type="text"
                 />
-    </div>
+              </span>
-    <div v-if="showdetail" class="detail-class">
+              <span v-else>
+                <svg-icon :icon-class="data.type" style="width: 14px;height: 14px" />
+              </span>
+              <span style="margin-left: 6px;font-size: 14px">{{ data.name }}</span>
+            </span>
+          </span>
+        </el-tree>
+      </el-row>
+      <el-row v-if="detailItem&&detailItem.snapshot" class="detail-class">
         <el-card class="filter-card-class">
           <div slot="header" class="button-div-class">
             <span>{{ detailItem.name }}</span>
           </div>
-        <img class="view-list-thumbnails" :src="detailItem.snapshot" alt="">
+          <img draggable="false" class="view-list-thumbnails" :src="detailItem.snapshot" alt="">
         </el-card>
-    </div>
+      </el-row>
-  </div>
+    </el-row>
+  </el-col>
 </template>
 
 <script>
-import { tree } from '@/api/panel/view'
+import { tree, findOne } from '@/api/panel/view'
-import { addClass, removeClass } from '@/utils'
-import bus from '@/utils/bus'
 export default {
   name: 'ViewSelect',
   data() {
     return {
-      filterText: null,
+      templateFilterText: '',
+      defaultExpandedKeys: [],
       defaultProps: {
         children: 'children',
         label: 'name'
@@ -48,16 +72,8 @@ export default {
     }
   },
   watch: {
-    filterText(val) {
+    templateFilterText(val) {
-      this.$refs.tree.filter(val)
+      this.$refs.templateTree.filter(val)
-    },
-    showdetail(val) {
-      const dom = document.querySelector('.my-top')
-      if (val) {
-        addClass(dom, 'top-div-class')
-      } else {
-        removeClass(dom, 'top-div-class')
-      }
     }
   },
   created() {
@@ -68,46 +84,17 @@ export default {
       if (!value) return true
       return data.name.indexOf(value) !== -1
     },
+    nodeClick(data, node) {
+      findOne(data.id).then(res => {
+        this.detailItem = res.data
+      })
+    },
     loadData() {
       const param = {}
       tree(param).then(res => {
-        // let arr = []
-        // for (let index = 0; index < 10; index++) {
-        //   arr = arr.concat(res.data)
-        // }
-        // this.data = arr
         this.data = res.data
       })
     },
-    renderNode(h, { node, data, store }) {
-      return (
-        <div class='custom-tree-node' on-click={() => this.detail(data)} on-dblclick={() => this.addView2Drawing(data.id)}>
-          <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
-    },
-    addView2Drawing(viewId) {
-      //   viewInfo(viewId).then(res => {
-      //     const info = res.data
-      //     this.$emit('panel-view-add', info)
-      //   })
-      bus.$emit('panel-view-add', { id: viewId })
-      //   this.$emit('panel-view-add', viewId)
-    },
     handleDragStart(node, ev) {
       ev.dataTransfer.effectAllowed = 'copy'
       const dataTrans = {
@@ -115,7 +102,6 @@ export default {
         id: node.data.id
       }
       ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
-      // bus.$emit('component-on-drag')
     },
 
     // 判断节点能否被拖拽
@@ -126,7 +112,6 @@ export default {
         return true
       }
     },
-
     allowDrop(draggingNode, dropNode, type) {
       return false
     }
@@ -144,7 +129,6 @@ export default {
   }
   .detail-class {
     width: 100%;
-    min-height: 200px;
     position: fixed;
     bottom: 0px;
   }

frontend/src/views/panel/template/component/TemplateList.vue

@@ -30,7 +30,7 @@
             <span>
               <span>
                 <el-button
-                  icon="el-icon-picture-outline"
+                  icon="el-icon-folder"
                   type="text"
                 />
               </span>
@@ -41,14 +41,14 @@
                 <el-dropdown trigger="click" size="small" @command="clickMore">
                   <span class="el-dropdown-link">
                     <el-button
-                      icon="el-icon-plus"
+                      icon="el-icon-more"
                       type="text"
                       size="small"
                     />
                   </span>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
-                      编辑
+                      重命名
                     </el-dropdown-item>
                     <el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
                       删除