feat: 仪表板编辑增加新建视图功能，可以直接在仪表板新建视图

2026-05-23 22:08:34 +08:00 · 2021-07-06 18:34:01 +08:00
parent a8e097409f
commit 4b11bfeb72
24 changed files with 1324 additions and 24 deletions
--- a/frontend/src/api/chart/chart.js
+++ b/frontend/src/api/chart/chart.js
@@ -35,3 +35,19 @@ export function chartCopy(id) {
    loading: true
  })
 }
+export function chartGroupTree(data) {
+  return request({
+    url: '/chart/group/tree',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+
+export function searchAdviceSceneId(panelId) {
+  return request({
+    url: '/chart/view/searchAdviceSceneId/' + panelId,
+    method: 'get',
+    loading: true
+  })
+}
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -51,7 +51,7 @@ export default {
      if (this.curComponent.type === 'view') {
        this.$store.dispatch('chart/setViewId', null)
        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId }})
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
      }
      if (this.curComponent.type === 'custom') {
        bus.$emit('component-dialog-edit')
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -666,6 +666,8 @@ export default {
    area_mode: 'Area',
    rose_radius: 'Fillet',
    view_name: 'Chart Title',
+    belong_group: 'Belong Group',
+    select_group: 'Select Group',
    name_can_not_empty: 'Name cannot be empty',
    template_can_not_empty: 'Please check a Template',
    custom_count: 'Number of records',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -708,6 +708,8 @@ export default {
    area_mode: '面積',
    rose_radius: '園角',
    view_name: '視圖標題',
+    belong_group: '所属分组',
+    select_group: '选择分组',
    name_can_not_empty: '名稱不能為空',
    template_can_not_empty: '請選擇儀表板',
    custom_count: '記錄數',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -666,6 +666,8 @@ export default {
    area_mode: '面积',
    rose_radius: '圆角',
    view_name: '视图标题',
+    belong_group: '所属分组',
+    select_group: '选择分组',
    name_can_not_empty: '名称不能为空',
    template_can_not_empty: '请选择仪表版',
    custom_count: '记录数',
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -290,17 +290,29 @@
      class="dialog-css"
      :destroy-on-close="true"
    >
-      <el-row style="width: 400px;">
+      <el-row style="width: 800px;">
        <el-form ref="form" :model="table" label-width="80px" size="mini" class="form-item">
-          <el-form-item :label="$t('chart.view_name')">
-            <el-input v-model="chartName" size="mini" />
-          </el-form-item>
+          <el-col :span="12">
+            <el-form-item :label="$t('chart.view_name')">
+              <el-input v-model="chartName" style="height: 34px" size="mini" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="optFrom==='panel'">
+            <el-form-item :label="$t('chart.belong_group')">
+              <treeselect
+                v-model="currGroup.id"
+                :options="chartGroupTreeAvailable"
+                :normalizer="normalizer"
+                :placeholder="$t('chart.select_group')"
+              />
+            </el-form-item>
+          </el-col>
        </el-form>
      </el-row>
      <table-selector @getTable="getTable" />
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeCreateChart">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" :disabled="!table.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
+        <el-button type="primary" size="mini" :disabled="!table.id || !currGroup.id" @click="createChart">{{ $t('chart.confirm') }}</el-button>
      </div>
    </el-dialog>

@@ -327,7 +339,7 @@
 </template>

 <script>
-import { post } from '@/api/chart/chart'
+import { post, chartGroupTree } from '@/api/chart/chart'
 import { authModel } from '@/api/system/sysAuth'
 import TableSelector from '../view/TableSelector'
 import GroupMoveSelector from '../components/TreeSelector/GroupMoveSelector'
@@ -352,6 +364,17 @@ export default {
      type: Object,
      required: false,
      default: null
+    },
+    // 操作来源 'panel' 为仪表板
+    optFrom: {
+      type: String,
+      required: false,
+      default: null
+    },
+    adviceGroupId: {
+      type: String,
+      required: false,
+      default: null
    }
  },
  data() {
@@ -415,7 +438,8 @@ export default {
      groupMoveConfirmDisabled: true,
      dsMoveConfirmDisabled: true,
      moveDialogTitle: '',
-      isTreeSearch: false
+      isTreeSearch: false,
+      chartGroupTreeAvailable: []
    }
  },
  computed: {
@@ -443,12 +467,19 @@ export default {
    },
    saveStatus() {
      this.refreshNodeBy(this.saveStatus.sceneId)
+    },
+    adviceGroupId() {
+      // 仪表板新建视图建议的存放路径
+      if (this.optFrom === 'panel') {
+        this.currGroup['id'] = this.adviceGroupId
+      }
    }
  },
  mounted() {
    this.treeNode(this.groupForm)
    this.refresh()
    // this.chartTree()
+    this.getChartGroupTree()
  },
  methods: {
    clickAdd(param) {
@@ -758,10 +789,14 @@ export default {
        this.$store.dispatch('chart/setTableId', null)
        this.$store.dispatch('chart/setTableId', this.table.id)
        // this.$router.push('/chart/chart-edit')
-        this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
-        // this.$store.dispatch('chart/setViewId', response.data.id)
-        // this.chartTree()
-        this.refreshNodeBy(view.sceneId)
+        if (this.optFrom === 'panel') {
+          this.$emit('newViewInfo', { 'id': response.data.id })
+        } else {
+          this.$emit('switchComponent', { name: 'ChartEdit', param: { 'id': response.data.id }})
+          // this.$store.dispatch('chart/setViewId', response.data.id)
+          // this.chartTree()
+          this.refreshNodeBy(view.sceneId)
+        }
      })
    },

@@ -951,6 +986,18 @@ export default {
        this.isTreeSearch = false
        this.treeNode(this.groupForm)
      }
+    },
+
+    getChartGroupTree() {
+      chartGroupTree({}).then(res => {
+        this.chartGroupTreeAvailable = res.data
+      })
+    },
+    normalizer(node) {
+      // 去掉children=null的属性
+      if (node.children === null || node.children === 'null') {
+        delete node.children
+      }
    }
  }
 }
@@ -1045,4 +1092,11 @@ export default {
    height: 100%;
    overflow-y: auto;
  }
+  /deep/ .vue-treeselect__control{
+    height: 28px;
+  }
+  /deep/ .vue-treeselect__single-value{
+    color:#606266;
+    line-height: 28px!important;
+  }
 </style>
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -467,7 +467,11 @@ export default {
  },
  watch: {
    'param': function() {
-      this.getData(this.param.id)
+      if(this.param.optType === 'new'){
+
+      }else{
+        this.getData(this.param.id)
+      }
    }
  },
  created() {
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@@ -2,13 +2,19 @@
  <el-col v-loading="loading">
    <el-row style="margin-top: 5px">
      <el-row style="margin-left: 5px;margin-right: 5px">
-        <el-input
-          v-model="templateFilterText"
-          :placeholder="$t('panel.filter_keywords')"
-          size="mini"
-          clearable
-          prefix-icon="el-icon-search"
-        />
+        <el-col :span="16">
+          <el-input
+            v-model="templateFilterText"
+            :placeholder="$t('panel.filter_keywords')"
+            size="mini"
+            clearable
+            prefix-icon="el-icon-search"
+          />
+        </el-col>
+        <el-col :span="7">
+          <el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
+        </el-col>
+
      </el-row>
      <el-row style="margin-top: 5px">
        <el-tree
@@ -117,6 +123,9 @@ export default {
    },
    allowDrop(draggingNode, dropNode, type) {
      return false
+    },
+    newChart() {
+      this.$emit('newChart')
    }

  }
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -9,6 +9,7 @@
      <!--横向工具栏-->
      <el-col :span="16">
        <Toolbar
+          ref="toolbar"
          :style-button-active="show&&showIndex===2"
          :aided-button-active="aidedButtonActive"
          @showPanel="showPanel"
@@ -87,7 +88,7 @@
          :close-on-press-escape="false"
          :modal-append-to-body="true"
        >
-          <view-select v-show=" show && showIndex===0" />
+          <view-select v-show=" show && showIndex===0" @newChart="newChart" />
          <filter-group v-show=" show &&showIndex===1" />
          <subject-setting v-show=" show &&showIndex===2" />
          <assist-component v-show=" show &&showIndex===3" />
@@ -160,6 +161,15 @@
    <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
    <TextAttr v-if="curComponent&&curComponent.type==='v-text'" />

+    <!--复用ChartGroup组件 不做显示-->
+    <ChartGroup
+      ref="chartGroup"
+      :opt-from="'panel'"
+      :advice-group-id="adviceGroupId"
+      style="height: 0px;width:0px;overflow: hidden"
+      @newViewInfo="newViewInfo"
+    />
+
  </el-row>
 </template>

@@ -187,6 +197,8 @@ import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
 import PanelTextEditor from '@/components/canvas/custom-component/PanelTextEditor'
+import ChartGroup from '@/views/chart/group/Group'
+import { searchAdviceSceneId } from '@/api/chart/chart'

 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -220,7 +232,8 @@ export default {
    AssistComponent,
    PanelTextEditor,
    RectangleAttr,
-    TextAttr
+    TextAttr,
+    ChartGroup
  },
  data() {
    return {
@@ -255,7 +268,8 @@ export default {
      },
      beforeDialogValue: [],
      styleDialogVisible: false,
-      currentDropElement: null
+      currentDropElement: null,
+      adviceGroupId: null
    }
  },

@@ -605,6 +619,49 @@ export default {
      } else {
        return y
      }
+    },
+    newChart() {
+      this.adviceGroupId = null
+      this.show = false
+      searchAdviceSceneId(this.panelInfo.id).then(res => {
+        this.adviceGroupId = res.data
+        this.$refs['chartGroup'].selectTable()
+      })
+    },
+    newViewInfo(newViewInfo) {
+      debugger
+      let component
+      const newComponentId = uuid.v1()
+      // 用户视图设置 复制一个模板
+      componentList.forEach(componentTemp => {
+        if (componentTemp.type === 'view') {
+          component = deepCopy(componentTemp)
+          const propValue = {
+            id: newComponentId,
+            viewId: newViewInfo.id
+          }
+          component.propValue = propValue
+          component.filters = []
+        }
+      })
+
+      // position = absolution 或导致有偏移 这里中和一下偏移量
+      component.style.top = 0
+      component.style.left = 600
+      component.id = newComponentId
+      this.$store.commit('addComponent', { component })
+      this.$store.commit('recordSnapshot')
+      this.clearCurrentInfo()
+      this.$store.commit('setCurComponent', { component: component, index: this.componentData.length - 1 })
+
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
    }
  }
 }