Merge pull request #2410 from dataease/pr@dev@feat_panel12-details

refactor: 重新设计明细查看
2022-06-10 10:28:53 +08:00 · 2022-06-10 10:28:53 +08:00 · 2873c861e5
commit 2873c861e5
parent 20c3de7be3 f08769f9c4
11 changed files with 95 additions and 63 deletions
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@ -44,7 +44,7 @@
      >
        <slot :name="handlei" />
      </div>
-      <div :style="mainSlotStyleInner" class="main-background">
+      <div :id="componentCanvasId" :style="mainSlotStyleInner" class="main-background">
        <slot />
      </div>
    </div>
@ -385,6 +385,13 @@ export default {
    }
  },
  computed: {
+    componentCanvasId() {
+      if (this.element.type === 'view') {
+        return 'user-view-' + this.element.propValue.viewId
+      } else {
+        return 'components-' + this.element.id
+      }
+    },
    // 编辑组件显示
    editBarShow() {
      // 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置状态 3.当前不在移动端画布编辑状态 4.或者批量操作状态
@ -1741,8 +1748,8 @@ export default {
      removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
      removeEvent(window, 'resize', this.checkParentSize)
    },
-    showViewDetails() {
-      this.$emit('showViewDetails')
+    showViewDetails(params) {
+      this.$emit('showViewDetails', params)
    },
    amAddItem() {
      this.$emit('amAddItem')
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@ -5,8 +5,8 @@
    @click="handleClick"
    @mousedown="elementMouseDown"
  >
-    <div :style="commonStyle" class="main_view">
-      <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
+    <div :id="componentCanvasId" :style="commonStyle" class="main_view">
      <close-bar v-if="previewVisible" @closePreview="closePreview" />
      <de-out-widget
        v-if="config.type==='custom'"
@ -110,6 +110,13 @@ export default {
    }
  },
  computed: {
+    componentCanvasId() {
+      if (this.config.type === 'view') {
+        return 'user-view-' + this.config.propValue.viewId
+      } else {
+        return 'components-' + this.config.id
+      }
+    },
    commonStyle() {
      const style = {
        width: '100%',
@ -224,8 +231,8 @@ export default {
      e.stopPropagation()
      this.$store.commit('setCurComponent', { component: this.config, index: this.index })
    },
-    showViewDetails() {
-      this.$refs.wrapperChild.openChartDetailsDialog()
+    showViewDetails(params) {
+      this.$refs.wrapperChild.openChartDetailsDialog(params)
    },
    closePreview() {
      this.previewVisible = false
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@ -24,10 +24,10 @@
        <i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
      </span>
      <span :title="$t('panel.details')">
-        <i v-if="curComponent.type==='view'" class="el-icon-ticket" @click.stop="showViewDetails" />
+        <i v-if="curComponent.type==='view'" class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
      </span>
-      <span :title="$t('panel.details')">
-        <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+      <span :title="$t('panel.enlarge')">
+        <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />
      </span>
      <span :title="$t('panel.cancel_linkage')">
        <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
@ -157,12 +157,8 @@ export default {
        this.timer = null
      }
    },
-    showViewDetails() {
-      this.$emit('showViewDetails')
-    },
-    componentJump() {
-      window.open(url, '_blank')
-      // this.$emit('showViewDetails')
+    showViewDetails(openType = 'details') {
+      this.$emit('showViewDetails', { openType: openType })
    },
    auxiliaryMatrixChange() {
      if (this.curComponent.auxiliaryMatrix) {
--- a/frontend/src/components/canvas/components/Editor/EditBarView.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue
@ -5,7 +5,7 @@
        <i class="icon iconfont icon-edit" @click.stop="edit" />
      </span>
      <span :title="$t('panel.details')">
-        <i class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+        <i class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
      </span>
    </div>
    <div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
@ -87,8 +87,8 @@ export default {
    amRemoveItem() {
      this.$emit('amRemoveItem')
    },
-    showViewDetails() {
-      this.$emit('showViewDetails')
+    showViewDetails(params) {
+      this.$emit('showViewDetails', params)
    },
    positionCheck(position) {
      return this.showPosition.includes(position)
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@ -37,22 +37,20 @@
        <el-dialog
          :title="$t('chart.chart_details')"
          :visible.sync="chartDetailsVisible"
-          width="70%"
+          width="80%"
          class="dialog-css"
          :destroy-on-close="true"
+          top="5vh"
        >
          <span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
-            <el-dropdown>
-              <el-button size="mini">
-                {{ $t('chart.export') }}<i class="el-icon-download" />
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
-                <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+            <el-button v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
+              {{ $t('chart.export_img') }}
+            </el-button>
+            <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
+              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
+            </el-button>
          </span>
-          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
+          <UserViewDialog v-if="chartDetailsVisible" ref="userViewDialog" :open-type="showChartInfoType" :chart="showChartInfo" :chart-table="showChartTableInfo" />
        </el-dialog>

        <!--手机视图详情-->
@ -169,6 +167,7 @@ export default {
      mobileChartDetailsVisible: false,
      showChartInfo: {},
      showChartTableInfo: {},
+      showChartInfoType: 'details',
      // 布局展示 1.pc pc端布局 2.mobile 移动端布局
      terminal: 'pc'
    }
@ -189,9 +188,6 @@ export default {
        return this.panelInfo.status === 'unpublished'
      }
    },
-    showExportImgButton() {
-      return this.showChartInfo.type && !this.showChartInfo.type.includes('table')
-    },
    canvasInfoMainStyle() {
      if (this.backScreenShot) {
        return {
@ -378,6 +374,7 @@ export default {
    openChartDetailsDialog(chartInfo) {
      this.showChartInfo = chartInfo.chart
      this.showChartTableInfo = chartInfo.tableChart
+      this.showChartInfoType = chartInfo.openType
      if (this.terminal === 'pc') {
        this.chartDetailsVisible = true
      } else {
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -45,7 +45,7 @@
      :linkage-active="linkageActiveCheck(item)"
      :batch-opt-active="batchOptActiveCheck(item)"
      @refLineParams="getRefLineParams"
-      @showViewDetails="showViewDetails(index)"
+      @showViewDetails="showViewDetails($event,index)"
      @resizeView="resizeView(index,item)"
      @onResizeStart="startResize"
      @onDragStart="onStartMove"
@ -137,27 +137,26 @@
    <el-dialog
      :title="$t('chart.chart_details')"
      :visible.sync="chartDetailsVisible"
-      width="70%"
+      width="80%"
      class="dialog-css"
      :destroy-on-close="true"
      :show-close="true"
+      top="5vh"
    >
      <span v-if="chartDetailsVisible" style="position: absolute;right: 70px;top:15px">
-        <el-dropdown>
-          <el-button size="mini">
-            {{ $t('chart.export') }}<i class="el-icon-download" />
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
-            <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
+        <el-button v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
+          {{ $t('chart.export_img') }}
+        </el-button>
+        <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
+          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
+        </el-button>
      </span>
      <UserViewDialog
        v-if="chartDetailsVisible"
        ref="userViewDialog"
        :chart="showChartInfo"
        :chart-table="showChartTableInfo"
+        :open-type="showChartInfoType"
      />
    </el-dialog>

@ -912,6 +911,7 @@ export default {
      chartDetailsVisible: false,
      showChartInfo: {},
      showChartTableInfo: {},
+      showChartInfoType: 'details',
      // 挤占式画布设计
      baseWidth: 100,
      baseHeight: 100,
@ -1351,6 +1351,7 @@ export default {
    openChartDetailsDialog(chartInfo) {
      this.showChartInfo = chartInfo.chart
      this.showChartTableInfo = chartInfo.tableChart
+      this.showChartInfoType = chartInfo.openType
      this.chartDetailsVisible = true
    },
    exportExcel() {
@ -1359,8 +1360,8 @@ export default {
    exportViewImg() {
      this.$refs['userViewDialog'].exportViewImg()
    },
-    showViewDetails(index) {
-      this.$refs.wrapperChild[index].openChartDetailsDialog()
+    showViewDetails(params, index) {
+      this.$refs.wrapperChild[index].openChartDetailsDialog(params)
    },

    resizeView(index, item) {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -593,7 +593,7 @@ export default {
    viewIdMatch(viewIds, viewId) {
      return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
    },
-    openChartDetailsDialog() {
+    openChartDetailsDialog(params) {
      const tableChart = deepCopy(this.chart)
      tableChart.customAttr = JSON.parse(this.chart.customAttr)
      tableChart.customStyle = JSON.parse(this.chart.customStyle)
@ -604,7 +604,7 @@ export default {
      tableChart.customStyle.text.show = false
      tableChart.customAttr = JSON.stringify(tableChart.customAttr)
      tableChart.customStyle = JSON.stringify(tableChart.customStyle)
-      eventBus.$emit('openChartDetailsDialog', { chart: this.chart, tableChart: tableChart })
+      eventBus.$emit('openChartDetailsDialog', { chart: this.chart, tableChart: tableChart, openType: params.openType })
    },
    chartClick(param) {
      if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@ -1,6 +1,6 @@
 <template>
  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <de-aside-container v-if="showChartCanvas">
+    <de-main-container v-show="showChartCanvas">
      <div id="chartCanvas" class="canvas-class" :style="customStyle">
        <div class="canvas-class" :style="commonStyle">
          <plugin-com
@ -17,8 +17,8 @@
          <label-normal-text v-else-if="chart.type === 'label'" :chart="chart" class="table-class" />
        </div>
      </div>
-    </de-aside-container>
-    <de-main-container>
+    </de-main-container>
+    <de-main-container v-show="!showChartCanvas">
      <table-normal :chart="chartTable" :show-summary="false" class="table-class" />
    </de-main-container>
  </de-container>
@ -43,7 +43,7 @@ import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { deepCopy, exportImg } from '@/components/canvas/utils/utils'
 export default {
-  name: 'UserView',
+  name: 'UserViewDialog',
  components: { LabelNormalText, ChartComponentS2, ChartComponentG2, DeMainContainer, DeContainer, DeAsideContainer, ChartComponent, TableNormal, LabelNormal, PluginCom },
  props: {
    chart: {
@ -53,6 +53,10 @@ export default {
    chartTable: {
      type: Object,
      default: null
+    },
+    openType: {
+      type: String,
+      default: 'details'
    }
  },
  data() {
@ -65,7 +69,10 @@ export default {
  computed: {

    showChartCanvas() {
-      return this.chart.type !== 'table-normal' && this.chart.type !== 'table-info'
+      return this.openType === 'enlarge'
+    },
+    isOnlyDetails() {
+      return this.chart.type === 'table-normal' || this.chart.type === 'table-info'
    },
    customStyle() {
      let style = {
@ -150,13 +157,25 @@ export default {
  methods: {
    exportExcel() {
      const _this = this
-      if (this.showChartCanvas) {
-        html2canvas(document.getElementById('chartCanvas')).then(canvas => {
-          const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
-          _this.exportExcelDownload(snapshot, canvas.width, canvas.height)
-        })
-      } else {
+      if (this.isOnlyDetails) {
        _this.exportExcelDownload()
+      } else {
+        if (this.showChartCanvas) {
+          html2canvas(document.getElementById('chartCanvas')).then(canvas => {
+            const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+            _this.exportExcelDownload(snapshot, canvas.width, canvas.height)
+          })
+        } else {
+          const dom = document.getElementById('user-view-' + this.chart.id)
+          if (dom) {
+            html2canvas(dom).then(canvas => {
+              const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+              _this.exportExcelDownload(snapshot, canvas.width, canvas.height)
+            })
+          } else {
+            _this.exportExcelDownload()
+          }
+        }
      }
    },
    exportViewImg() {
@ -199,15 +218,14 @@ export default {

 <style lang="scss" scoped>
  .ms-aside-container {
-    height: 50vh;
+    height: 70vh;
    min-width: 400px;
    max-width: 400px;
    padding: 0 0;
  }
  .ms-main-container {
-    height: 50vh;
+    height: 70vh;
    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
  }
  .chart-class{
    height: 100%;
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -643,7 +643,7 @@ export default {
    login_type: 'Default login type',
    empty_front: 'If empty then default value is 10s',
    empty_msg: 'If empty then default value is 30 days',
-    front_error: 'Valid ranger [0 - 300]', //修改了提示信息
+    front_error: 'Valid ranger [0 - 300]', // 修改了提示信息
    msg_error: 'Valid ranger [1 - 365]',
    SMTP_port: 'SMTP Port',
    SMTP_account: 'SMTP Account',
@ -660,6 +660,7 @@ export default {
    kettle_setting: 'Kettle Setting'
  },
  chart: {
+    export_img: 'Export Img',
    title_repeat: 'The Title Already Exist',
    save_snapshot: 'Save Snapshot',
    datalist: 'Chart',
@ -1452,6 +1453,7 @@ export default {
    sure_bt: 'Confirm'
  },
  panel: {
+    enlarge: 'Enlarge',
    panel_style: 'Panel Style',
    multiplexing: 'Multiplexing',
    panel_off: 'Off the shelf',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -662,6 +662,7 @@ export default {
    kettle_setting: 'Kettle 設置'
  },
  chart: {
+    export_img: '导出图片',
    title_repeat: '當前標題已存在',
    save_snapshot: '保存縮略圖',
    datalist: '視圖',
@ -1453,6 +1454,7 @@ export default {
    sure_bt: '確定'
  },
  panel: {
+    enlarge: '放大',
    panel_style: '仪表板样式',
    multiplexing: '復用',
    panel_off: '儀表板已下架',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -663,6 +663,7 @@ export default {
    kettle_setting: 'Kettle 设置'
  },
  chart: {
+    export_img: '导出图片',
    title_repeat: '当前标题已存在',
    save_snapshot: '保存缩略图',
    datalist: '视图',
@ -1460,6 +1461,7 @@ export default {
    sure_bt: '确定'
  },
  panel: {
+    enlarge: '放大',
    panel_style: '仪表板样式',
    multiplexing: '复用',
    panel_off: '仪表板已下架',