fix:初步实现数据查看功能

data-room-ui/packages/BasicComponents/ChartTab/index.vue

@@ -42,12 +42,12 @@
       <div
         class="configuration-wrap"
         :class="{
-          'active': activeCodes.includes(config.customize.tabList[currentIndex].chart.code),
-          'hover': hoverCode === config.customize.tabList[currentIndex].chart.code
+          'active': activeCodes.includes(config.customize.tabList[currentIndex].chartCode),
+          'hover': hoverCode === config.customize.tabList[currentIndex].chartCode
         }"
-        @mouseenter.stop="changeHover(config.customize.tabList[currentIndex].chart.code)"
+        @mouseenter.stop="changeHover(config.customize.tabList[currentIndex].chartCode)"
         @mouseleave="changeHover('')"
-        @click.stop="changeActive(config.customize.tabList[currentIndex].chart)"
+        @click.stop="changeActive(config.customize.tabList[currentIndex].chartCode)"
       >
         <RenderCardInner
           :ref="'RenderCard' + config.customize.tabList[currentIndex].chartCode"
@@ -136,8 +136,8 @@ export default {
       this.changeHoverCode(code)
     },
     // 改变激活的组件
-    changeActive (config) {
-      this.changeActiveCode(config.code)
+    changeActive (code) {
+      this.changeActiveCode(code)
     }
   }
 }

data-room-ui/packages/BasicComponents/ChartTab/setting.vue

@@ -247,7 +247,6 @@ export default {
     },
     addTab () {
       const newTab = {
-        code: '',
         chartCode: new Date().getTime() + '',
         name: '',
         chart: { parentCode: this.config.code }

data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue

@@ -0,0 +1,143 @@
+<!--
+@name:数据预览弹窗
+@description:
+@author: liu.shiyi
+@time:
+-->
+<template>
+  <div class="bs-data-view-dialog">
+    <el-dialog
+      :close-on-click-modal="false"
+      title="数据查看"
+      :visible.sync="formVisible"
+      :append-to-body="false"
+      class="bs-dialog-wrap bs-el-dialog"
+    >
+      <el-table
+        ref="table"
+        v-loading="loading"
+        class="bs-table bs-el-table"
+        height="300"
+        :data="dataList"
+      >
+        <el-table-column
+          v-for="(col,index) in columnData"
+          :key="index"
+          show-overflow-tooltip
+          :prop="col.alias"
+          :label="getLabel(col)"
+          align="center"
+        />
+      </el-table>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="primary"
+          :loading="sureLoading"
+          @click="exportHandler"
+        >
+          导出数据
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getChatInfo, getUpdateChartInfo } from 'data-room-ui/js/api/bigScreenApi'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'DataViewDialog',
+  components: {},
+  props: {
+  },
+  data () {
+    return {
+      formVisible: false,
+      sureLoading: false,
+      loading: false,
+      dataList: [],
+      columnData: []
+    }
+  },
+  computed: {
+    ...mapState({
+      pageCode: state => state.bigScreen.pageInfo.code
+    })
+  },
+  watch: {},
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    init (config) {
+      this.resetData()
+      this.formVisible = true
+      this.getDataList(config)
+    },
+    // 获取数据列表
+    getDataList (config) {
+      this.loading = true
+      if (config.type === 'customComponent' && (!config.dataSource.businessKey)) {
+        const list = config.option.data
+        this.columnData = (Object.keys(list[0])).map((key) => {
+          return {
+            aggregate: '',
+            alias: key,
+            originalColumn: key,
+            remark: key,
+            tableName: '',
+            type: 'varchar'
+          }
+        })
+        this.dataList = list
+        this.loading = false
+      } else {
+        const params = {
+          chart: {
+            ...config,
+            option: undefined
+          },
+          current: 1,
+          pageCode: this.pageCode,
+          type: config.type
+        }
+        getUpdateChartInfo(params).then(res => {
+          this.loading = false
+          this.dataList = res.data || []
+          this.columnData = res.columnData || []
+        }).catch(err => { console.log(err) }).finally(() => {
+          this.loading = false
+        })
+      }
+    },
+    getLabel (col) {
+      return col.remark || col.originalColumn
+    },
+    // 数据重置
+    resetData () {
+      this.columnData = []
+      this.dataList = []
+    },
+    // 导出数据
+    exportHandler () {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-data-view-dialog{
+  /deep/.el-dialog__body{
+    background-color: var(--bs-background-2) !important;
+  }
+ .el-table th.el-table__cell.is-leaf, .el-table /deep/td.el-table__cell{
+    border-bottom:none;
+  }
+}
+
+</style>

data-room-ui/packages/BigScreenDesign/index.vue

@@ -51,6 +51,7 @@
                 'grid-bg': hasGrid
               }"
               @openRightPanel="openRightPanel"
+              @openDataViewDialog="openDataViewDialog"
             />
           </MouseSelect>
         </SketchDesignRuler>
@@ -111,6 +112,9 @@
         ref="iframeDialog"
       />
     </div>
+    <data-view-dialog
+      ref="dataViewDialog"
+    />
   </div>
   <NotPermission v-else-if="!hasPermission" />
 </template>
@@ -137,6 +141,7 @@ import { isFirefox } from 'data-room-ui/js/utils/userAgent'
 import { handleResData } from 'data-room-ui/js/store/actions.js'
 import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import NotPermission from 'data-room-ui/NotPermission'
+import DataViewDialog from 'data-room-ui/BigScreenDesign/DataViewDialog'
 export default {
   name: 'BigScreenDesign',
   components: {
@@ -149,7 +154,8 @@ export default {
     SourceDialog,
     ComponentDialog,
     iframeDialog,
-    NotPermission
+    NotPermission,
+    DataViewDialog
   },
   mixins: [multipleSelectMixin],
   props: {
@@ -168,6 +174,7 @@ export default {
   },
   data () {
     return {
+      dataViewDialogConfig: null,
       hasPermission: true,
       rightVisiable: false,
       pageInfoVisiable: false,
@@ -230,20 +237,6 @@ export default {
       }
     }
   },
-  // beforeRouteEnter (to, from, next) {
-  //   // 判断进入设计页面前是否有访问权限
-  //   const code = to.query.code
-  //   get(`/bigScreen/permission/check/${code}`).then((res) => {
-  //     if (res) {
-  //       next((vm) => {
-  //         // 重置大屏的vuex store
-  //         vm.$store.commit('bigScreen/resetStoreData')
-  //       })
-  //     } else {
-  //       next('/notPermission')
-  //     }
-  //   })
-  // },
   created () {
     this.changePageLoading(true)
     this.permission()
@@ -380,6 +373,10 @@ export default {
       this.rightVisiable = true
       this.pageInfoVisiable = false
     },
+    openDataViewDialog (config) {
+      this.dataViewDialogConfig = config
+      this.$refs.dataViewDialog.init(config)
+    },
     /**
        * @description: 清空页面
        */

data-room-ui/packages/Render/index.vue

@@ -50,6 +50,7 @@
         v-if="isInit"
         :config="chart"
         @openRightPanel="openRightPanel"
+        @openDataViewDialog="openDataViewDialog"
       >
         <RenderCard
           :ref="'RenderCard' + chart.code"
@@ -196,6 +197,10 @@ export default {
     openRightPanel (config) {
       this.$emit('openRightPanel', config)
     },
+    // 查看数据
+    openDataViewDialog (config) {
+      this.$emit('openDataViewDialog', config)
+    },
     drop (e) {
       e.preventDefault()
       // 解决：火狐拖放后，总会默认打开百度搜索，如果是图片，则会打开图片的问题。

data-room-ui/packages/js/mixins/chartContextMenu.js

@@ -51,6 +51,11 @@ export default {
       this.changeActiveCode(config.code)
       this.$emit('openRightPanel', config)
     },
+    // 查看数据
+    dataView (config) {
+      this.changeActiveCode(config.code)
+      this.$emit('openDataViewDialog', config)
+    },
     // 复制组件
     copyItem (config) {
       const newConfig = cloneDeep(config)
@@ -202,6 +207,13 @@ export default {
             onClick: () => {
               this.groupChart(chart)
             }
+          },
+          {
+            label: '查看数据',
+            icon: 'el-icon-view',
+            onClick: () => {
+              this.dataView(chart)
+            }
           }
         ],
         event, // 鼠标事件信息