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

2021-05-08 00:04:24 +08:00 · 2021-05-08 00:04:24 +08:00 · 7a27491b53
commit 7a27491b53
parent dd17ebe2c5
8 changed files with 140 additions and 93 deletions
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelGroupMapper.xml
+++ b/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},'%')
--- a/backend/src/main/java/io/dataease/controller/panel/api/ViewApi.java
+++ b/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);
+



--- a/backend/src/main/java/io/dataease/controller/panel/server/ViewServer.java
+++ b/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);
+    }
 }
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/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);
+    }
 }
--- a/frontend/src/api/panel/view.js
+++ b/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
+  })
+}
+
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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: '' })
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@ -1,43 +1,67 @@
 <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"
-        draggable
-        :allow-drop="allowDrop"
-        :allow-drag="allowDrag"
-        :filter-node-method="filterNode"
-        @node-drag-start="handleDragStart"
-      />
-    </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>
-        <img class="view-list-thumbnails" :src="detailItem.snapshot" alt="">
-      </el-card>
-    </div>
-  </div>
+  <el-col>
+    <el-row style="margin-top: 5px">
+      <el-row style="margin-left: 5px;margin-right: 5px">
+        <el-input
+          v-model="templateFilterText"
+          placeholder="输入关键字进行过滤"
+          size="mini"
+          clearable
+          prefix-icon="el-icon-search"
+        />
+      </el-row>
+      <el-row style="margin-top: 5px">
+        <el-tree
+          ref="templateTree"
+          :default-expanded-keys="defaultExpandedKeys"
+          :data="data"
+          node-key="id"
+          :props="defaultProps"
+          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"
+                />
+              </span>
+              <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 draggable="false" class="view-list-thumbnails" :src="detailItem.snapshot" alt="">
+        </el-card>
+      </el-row>
+    </el-row>
+  </el-col>
 </template>

 <script>
-import { tree } from '@/api/panel/view'
-import { addClass, removeClass } from '@/utils'
-import bus from '@/utils/bus'
+import { tree, findOne } from '@/api/panel/view'
 export default {
  name: 'ViewSelect',
  data() {
    return {
-      filterText: null,
+      templateFilterText: '',
+      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
@ -48,16 +72,8 @@ export default {
    }
  },
  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')
-      }
+    templateFilterText(val) {
+      this.$refs.templateTree.filter(val)
    }
  },
  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;
  }
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/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)">
                      删除