fix:预览态添加数据查看功能

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

@@ -174,7 +174,6 @@ export default {
   },
   data () {
     return {
-      dataViewDialogConfig: null,
       hasPermission: true,
       rightVisiable: false,
       pageInfoVisiable: false,
@@ -374,7 +373,6 @@ export default {
       this.pageInfoVisiable = false
     },
     openDataViewDialog (config) {
-      this.dataViewDialogConfig = config
       this.$refs.dataViewDialog.init(config)
     },
     /**

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

@@ -22,15 +22,23 @@
             zIndex: chart.z || 0
           }"
         >
-          <RenderCard
-            ref="RenderCardRef"
-            :key="chart.key"
+          <Configuration
             :config="chart"
-            @styleHandler="styleHandler"
-          />
+            @openDataViewDialog="openDataViewDialog"
+          >
+            <RenderCard
+              ref="RenderCardRef"
+              :key="chart.key"
+              :config="chart"
+              @styleHandler="styleHandler"
+            />
+          </Configuration>
         </div>
       </div>
     </div>
+    <data-view-dialog
+      ref="dataViewDialog"
+    />
   </div>
   <NotPermission v-else />
 </template>
@@ -40,9 +48,13 @@ import { mapActions, mapMutations, mapState } from 'vuex'
 import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
 import NotPermission from 'data-room-ui/NotPermission'
 import cloneDeep from 'lodash/cloneDeep'
+import Configuration from 'data-room-ui/Render/Configuration.vue'
+import DataViewDialog from 'data-room-ui/BigScreenDesign/DataViewDialog/index.vue'
 export default {
   name: 'BigScreenRun',
   components: {
+    DataViewDialog,
+    Configuration,
     RenderCard,
     NotPermission
   },
@@ -170,6 +182,10 @@ export default {
       'changePageConfig',
       'changeChartConfig'
     ]),
+    // 右键点击查看数据
+    openDataViewDialog (config) {
+      this.$refs.dataViewDialog.init(config)
+    },
     // 切换主题时针对远程组件触发样式修改的方法
     styleHandler (config) {
       this.chartList.forEach((chart, index) => {

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

@@ -39,7 +39,10 @@ export default {
       activeItemConfig: state => state.bigScreen.activeItemConfig,
       chartList: state => state.bigScreen.pageInfo.chartList,
       presetLine: state => state.bigScreen.presetLine
-    })
+    }),
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    }
   },
   data () {
     return {

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

@@ -132,95 +132,113 @@ export default {
     // 右键菜单
     onContextmenu (event, chart) {
       event.preventDefault()
-      this.$contextmenu({
-        items: [
-          {
-            label: '配置',
-            icon: 'el-icon-setting',
-            onClick: () => {
-              this.openRightPanel(chart)
+      if (this.isPreview) {
+        this.$contextmenu({
+          items: [
+            {
+              label: '查看数据',
+              icon: 'el-icon-view',
+              onClick: () => {
+                this.dataView(chart)
+              }
             }
-          },
-          {
-            label: '删除',
-            icon: 'el-icon-delete',
-            onClick: () => {
-              this.deleteItem(chart)
-            }
-          },
-          {
-            label: '批量删除',
-            icon: 'el-icon-delete',
-            onClick: () => {
-              this.deleteGroupItem(chart)
-            }
-          },
-          {
-            label: '复制',
-            icon: 'el-icon-copy-document',
-            onClick: () => {
-              this.copyItem(chart)
-            }
-          },
-          {
-            label: '组合复制',
-            icon: 'el-icon-copy-document',
-            onClick: () => {
-              this.copyCharts()
-              this.pasteCharts()
-            }
-          },
-          {
-            label: '置于顶层',
-            icon: 'el-icon-arrow-up',
-            onClick: () => {
-              let chartList = cloneDeep(this.chartList)
-              // 将当前图表置底
-              chartList = chartList.filter(item => item.code !== chart.code)
-              chartList.unshift(chart)
-              this.changeLayout(chartList)
-              this.changeZIndex(chartList)
-            }
-          },
-          {
-            label: '置于底层',
-            icon: 'el-icon-arrow-down',
-            onClick: () => {
-              let chartList = cloneDeep(this.chartList)
-              // 将当前图表置顶
-              chartList = chartList.filter(item => item.code !== chart.code)
-              chartList.push(chart)
-              this.changeLayout(chartList)
-              this.changeZIndex(chartList)
-            }
-          },
-          {
-            label: chart.locked ? '解锁' : '锁定',
-            icon: chart.locked ? 'el-icon-unlock' : 'el-icon-lock',
-            onClick: () => {
-              this.changeLocked(chart)
-            }
-          },
-          {
-            label: (chart.group && chart.group !== 'tempGroup') ? '取消组合' : '组合',
-            icon: (chart.group && chart.group !== 'tempGroup') ? 'iconfont-bigscreen icon-quxiaoguanlian' : 'iconfont-bigscreen icon-zuhe',
-            onClick: () => {
-              this.groupChart(chart)
-            }
-          },
-          {
-            label: '查看数据',
-            icon: 'el-icon-view',
-            onClick: () => {
-              this.dataView(chart)
+          ],
+          event, // 鼠标事件信息
+          customClass: 'bs-context-menu-class', // 自定义菜单 class
+          zIndex: 999, // 菜单样式 z-index
+          minWidth: 150 // 主菜单最小宽度
+        })
+      } else {
+        this.$contextmenu({
+          items: [
+            {
+              label: '配置',
+              icon: 'el-icon-setting',
+              onClick: () => {
+                this.openRightPanel(chart)
+              }
+            },
+            {
+              label: '删除',
+              icon: 'el-icon-delete',
+              onClick: () => {
+                this.deleteItem(chart)
+              }
+            },
+            {
+              label: '批量删除',
+              icon: 'el-icon-delete',
+              onClick: () => {
+                this.deleteGroupItem(chart)
+              }
+            },
+            {
+              label: '复制',
+              icon: 'el-icon-copy-document',
+              onClick: () => {
+                this.copyItem(chart)
+              }
+            },
+            {
+              label: '组合复制',
+              icon: 'el-icon-copy-document',
+              onClick: () => {
+                this.copyCharts()
+                this.pasteCharts()
+              }
+            },
+            {
+              label: '置于顶层',
+              icon: 'el-icon-arrow-up',
+              onClick: () => {
+                let chartList = cloneDeep(this.chartList)
+                // 将当前图表置底
+                chartList = chartList.filter(item => item.code !== chart.code)
+                chartList.unshift(chart)
+                this.changeLayout(chartList)
+                this.changeZIndex(chartList)
+              }
+            },
+            {
+              label: '置于底层',
+              icon: 'el-icon-arrow-down',
+              onClick: () => {
+                let chartList = cloneDeep(this.chartList)
+                // 将当前图表置顶
+                chartList = chartList.filter(item => item.code !== chart.code)
+                chartList.push(chart)
+                this.changeLayout(chartList)
+                this.changeZIndex(chartList)
+              }
+            },
+            {
+              label: chart.locked ? '解锁' : '锁定',
+              icon: chart.locked ? 'el-icon-unlock' : 'el-icon-lock',
+              onClick: () => {
+                this.changeLocked(chart)
+              }
+            },
+            {
+              label: (chart.group && chart.group !== 'tempGroup') ? '取消组合' : '组合',
+              icon: (chart.group && chart.group !== 'tempGroup') ? 'iconfont-bigscreen icon-quxiaoguanlian' : 'iconfont-bigscreen icon-zuhe',
+              onClick: () => {
+                this.groupChart(chart)
+              }
+            },
+            {
+              label: '查看数据',
+              icon: 'el-icon-view',
+              onClick: () => {
+                this.dataView(chart)
+              }
             }
-          }
-        ],
-        event, // 鼠标事件信息
-        customClass: 'bs-context-menu-class', // 自定义菜单 class
-        zIndex: 999, // 菜单样式 z-index
-        minWidth: 150 // 主菜单最小宽度
-      })
+          ],
+          event, // 鼠标事件信息
+          customClass: 'bs-context-menu-class', // 自定义菜单 class
+          zIndex: 999, // 菜单样式 z-index
+          minWidth: 150 // 主菜单最小宽度
+        })
+      }
       return false
     }
   }