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

refactor: 重新设计明细查看

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() {
+    showViewDetails(params) {
-      this.$emit('showViewDetails')
+      this.$emit('showViewDetails', params)
     },
     amAddItem() {
       this.$emit('amAddItem')

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() {
+    showViewDetails(params) {
-      this.$refs.wrapperChild.openChartDetailsDialog()
+      this.$refs.wrapperChild.openChartDetailsDialog(params)
     },
     closePreview() {
       this.previewVisible = false

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')">
+      <span :title="$t('panel.enlarge')">
-        <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+        <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() {
+    showViewDetails(openType = 'details') {
-      this.$emit('showViewDetails')
+      this.$emit('showViewDetails', { openType: openType })
-    },
-    componentJump() {
-      window.open(url, '_blank')
-      // this.$emit('showViewDetails')
     },
     auxiliaryMatrixChange() {
       if (this.curComponent.auxiliaryMatrix) {

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() {
+    showViewDetails(params) {
-      this.$emit('showViewDetails')
+      this.$emit('showViewDetails', params)
     },
     positionCheck(position) {
       return this.showPosition.includes(position)

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 v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
-              <el-button size="mini">
+              {{ $t('chart.export_img') }}
-                {{ $t('chart.export') }}<i class="el-icon-download" />
+            </el-button>
-              </el-button>
+            <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
-              <el-dropdown-menu slot="dropdown">
+              <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
-                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
+            </el-button>
-                <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>
           </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 {

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 v-if="showChartInfoType==='enlarge'" class="el-icon-picture-outline" size="mini" @click="exportViewImg">
-          <el-button size="mini">
+          {{ $t('chart.export_img') }}
-            {{ $t('chart.export') }}<i class="el-icon-download" />
+        </el-button>
-          </el-button>
+        <el-button v-if="showChartInfoType==='details'" size="mini" @click="exportExcel">
-          <el-dropdown-menu slot="dropdown">
+          <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ $t('chart.export') }}Excel
-            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
+        </el-button>
-            <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>
       </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) {
+    showViewDetails(params, index) {
-      this.$refs.wrapperChild[index].openChartDetailsDialog()
+      this.$refs.wrapperChild[index].openChartDetailsDialog(params)
     },
 
     resizeView(index, item) {

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) {

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) {
+      if (this.isOnlyDetails) {
-        html2canvas(document.getElementById('chartCanvas')).then(canvas => {
-          const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
-          _this.exportExcelDownload(snapshot, canvas.width, canvas.height)
-        })
-      } else {
         _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%;

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',

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: '儀表板已下架',

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: '仪表板已下架',