Merge pull request #12640 from dataease/pr@dev-v2@refactor_picture-group

refactor(数据大屏、仪表板): 图片组显示优化

core/core-frontend/src/custom-component/picture-group/Component.vue

@@ -185,16 +185,16 @@ const withInit = () => {
   initCarousel()
 }
 
-const calcData = (view: Chart, callback) => {
+const calcData = (viewCalc: Chart, callback) => {
   isError.value = false
-  const { threshold } = parseJson(view.senior)
+  const { threshold } = parseJson(viewCalc.senior)
   if (!threshold.enable) {
     withInit()
     callback?.()
     return
   }
-  if (view.tableId || view['dataFrom'] === 'template') {
+  if (viewCalc.tableId || viewCalc['dataFrom'] === 'template') {
-    const v = JSON.parse(JSON.stringify(view))
+    const v = JSON.parse(JSON.stringify(viewCalc))
     getData(v)
       .then(res => {
         if (res.code && res.code !== 0) {
@@ -223,7 +223,7 @@ const calcData = (view: Chart, callback) => {
         })
         callback?.()
       })
-  } else if (!view.tableId) {
+  } else if (!viewCalc.tableId) {
     initReady.value = true
     withInit()
     callback?.()

core/core-frontend/src/custom-component/picture-group/PictureGroupDatasetSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PropType, reactive, toRefs } from 'vue'
+import { nextTick, PropType, reactive, toRefs } from 'vue'
 import { BASE_VIEW_CONFIG } from '@/views/chart/components/editor/util/chart'
 import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -24,21 +24,23 @@ const { view } = toRefs(props)
 const state = reactive({})
 
 const onDatasetUpdate = () => {
-  if (view.value.tableId && view.value.id) {
+  nextTick(() => {
-    getFieldByDQ(view.value.tableId, view.value.id, { type: 'table-info' })
+    if (view.value.tableId && view.value.id) {
-      .then(res => {
+      getFieldByDQ(view.value.tableId, view.value.id, { type: 'table-info' })
-        view.value.xAxis = []
+        .then(res => {
-        view.value.xAxis.push(...res.dimensionList, ...res.quotaList)
+          view.value.xAxis = []
-        const viewTarget = view.value
+          view.value.xAxis.push(...res.dimensionList, ...res.quotaList.pop())
-        useEmitt().emitter.emit('calcData-' + viewTarget.id, viewTarget)
+          const viewTarget = view.value
-        snapshotStore.recordSnapshotCache('calc', view.value.id)
+          useEmitt().emitter.emit('calcData-' + viewTarget.id, viewTarget)
-      })
+          snapshotStore.recordSnapshotCache('calc', view.value.id)
-      .catch(() => {
+        })
-        // something do error
+        .catch(() => {
-      })
+          // something do error
-  } else {
+        })
-    view.value.xAxis = []
+    } else {
-  }
+      view.value.xAxis = []
+    }
+  })
 }
 </script>
 

core/core-frontend/src/views/chart/components/views/index.vue

@@ -678,19 +678,6 @@ onMounted(() => {
       })
     }
   })
-  useEmitt({
-    name: 'calcData-' + view.value.id,
-    callback: function (val) {
-      if (!state.initReady) {
-        return
-      }
-      initTitle()
-      nextTick(() => {
-        view.value.chartExtRequest = filter(false)
-        calcData(val)
-      })
-    }
-  })
 
   useEmitt({
     name: 'calcData-' + view.value.id,
@@ -913,6 +900,10 @@ const loadPluginCategory = data => {
     }
   })
 }
+
+const allEmptyCheck = computed(() => {
+  return ['rich-text', 'picture-group'].includes(element.value.innerType)
+})
 </script>
 
 <template>
@@ -983,7 +974,7 @@ const loadPluginCategory = data => {
       </transition>
     </div>
     <!--这里去渲染不同图库的图表-->
-    <div v-if="chartAreaShow && !showEmpty" style="flex: 1; overflow: hidden">
+    <div v-if="allEmptyCheck || (chartAreaShow && !showEmpty)" style="flex: 1; overflow: hidden">
       <plugin-component
         v-if="view.plugin?.isPlugin"
         :jsname="view.plugin.staticMap['index']"
@@ -1061,7 +1052,7 @@ const loadPluginCategory = data => {
       />
     </div>
     <chart-empty-info
-      v-if="!chartAreaShow || showEmpty"
+      v-if="(!chartAreaShow || showEmpty) && !allEmptyCheck"
       :themes="canvasStyleData.dashboard.themeColor"
       :view-icon="view.type"
     ></chart-empty-info>