Merge pull request #12658 from dataease/pr@dev-v2@feat_inject-view

feat(数据大屏、仪表板): 嵌入式单图表渲染优化，支持增加图表id后缀等操作

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -100,10 +100,25 @@ const props = defineProps({
   isSelector: {
     type: Boolean,
     default: false
+  },
+  //图表渲染id后缀
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
-const { config, showPosition, index, canvasStyleData, canvasViewInfo, dvInfo, searchCount, scale } =
+const {
-  toRefs(props)
+  config,
+  showPosition,
+  index,
+  canvasStyleData,
+  canvasViewInfo,
+  dvInfo,
+  searchCount,
+  scale,
+  suffixId
+} = toRefs(props)
 let currentInstance
 const component = ref(null)
 const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
@@ -385,6 +400,7 @@ const deepScale = computed(() => scale.value / 100)
           :scale="deepScale"
           :disabled="true"
           :is-edit="false"
+          :suffix-id="suffixId"
           @onPointClick="onPointClick"
         />
       </div>

core/core-frontend/src/custom-component/indicator/DeIndicator.vue

@@ -37,6 +37,12 @@ const props = defineProps({
   terminal: {
     type: String,
     default: 'pc'
+  },
+  //图表渲染id后缀
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -103,10 +103,16 @@ const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
+  },
+  //图表渲染id后缀
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 
-const { element, editMode, active, disabled, showPosition } = toRefs(props)
+const { element, editMode, active, disabled, showPosition, suffixId } = toRefs(props)
 
 const state = reactive({
   emptyValue: '-',
@@ -124,7 +130,7 @@ const initReady = ref(false)
 const editShow = ref(true)
 const canEdit = ref(false)
 // 初始化配置
-const tinymceId = 'tinymce-view-' + element.value.id
+const tinymceId = 'tinymce-view-' + element.value.id + '-' + suffixId.value
 const myValue = ref('')
 
 const systemFontFamily = appearanceStore.fontList.map(item => item.name)

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -53,6 +53,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 
@@ -89,6 +94,7 @@ const onPointClick = param => {
       :show-position="showPosition"
       :search-count="searchCount"
       :disabled="disabled"
+      :suffixId="suffixId"
       @onPointClick="onPointClick"
     ></chart>
   </div>

core/core-frontend/src/pages/panel/ViewWrapper.vue

@@ -25,7 +25,8 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  chartId: null
+  chartId: null,
+  suffixId: 'common'
 })
 
 const embeddedParams = embeddedParamsDiv?.chartId ? embeddedParamsDiv : embeddedStore
@@ -57,6 +58,7 @@ onBeforeMount(async () => {
     return
   }
   state.chartId = embeddedParams.dvId
+  state.suffixId = embeddedParams.suffixId || 'common'
   window.addEventListener('message', winMsgHandle)
 
   // 添加外部参数
@@ -159,6 +161,7 @@ const onPointClick = param => {
       :canvas-view-info="state.canvasViewInfoPreview"
       @userViewEnlargeOpen="userViewEnlargeOpen"
       @onPointClick="onPointClick"
+      :suffix-id="state.suffixId"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>

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

@@ -62,6 +62,12 @@ const props = defineProps({
   terminal: {
     type: String,
     default: 'pc'
+  },
+  //图表渲染id后缀
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 
@@ -76,7 +82,7 @@ const emit = defineEmits([
 const g2TypeSeries1 = ['bidirectional-bar']
 const g2TypeSeries0 = ['bar-range']
 
-const { view, showPosition, scale, terminal } = toRefs(props)
+const { view, showPosition, scale, terminal, suffixId } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
@@ -97,7 +103,7 @@ let chartData = shallowRef<Partial<Chart['data']>>({
   fields: []
 })
 
-const containerId = 'container-' + showPosition.value + '-' + view.value.id
+const containerId = 'container-' + showPosition.value + '-' + view.value.id + '-' + suffixId.value
 const viewTrack = ref(null)
 
 const clearLinkage = () => {

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

@@ -76,12 +76,18 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 0
+  },
+  //图表渲染id后缀
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 
 const emit = defineEmits(['onPointClick', 'onChartClick', 'onDrillFilters', 'onJumpClick'])
 
-const { view, showPosition, scale, terminal, drillLength } = toRefs(props)
+const { view, showPosition, scale, terminal, drillLength, suffixId } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
@@ -116,7 +122,7 @@ let chartData = shallowRef<Partial<Chart['data']>>({
   fields: []
 })
 
-const containerId = 'container-' + showPosition.value + '-' + view.value.id
+const containerId = 'container-' + showPosition.value + '-' + view.value.id + '-' + suffixId.value
 const viewTrack = ref(null)
 
 const calcData = (view: Chart, callback, resetPageInfo = true) => {

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

@@ -125,6 +125,11 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  suffixId: {
+    type: String,
+    required: false,
+    default: 'common'
   }
 })
 const dynamicAreaId = ref('')
@@ -987,6 +992,7 @@ const allEmptyCheck = computed(() => {
         :request="request"
         :emitter="emitter"
         :store="store"
+        :suffixId="suffixId"
         ref="chartComponent"
         @onChartClick="chartClick"
         @onPointClick="onPointClick"
@@ -1002,6 +1008,7 @@ const allEmptyCheck = computed(() => {
         :active="active"
         :view="view"
         :show-position="showPosition"
+        :suffixId="suffixId"
       >
       </de-picture-group>
       <de-rich-text-view
@@ -1013,6 +1020,7 @@ const allEmptyCheck = computed(() => {
         :disabled="!['canvas', 'canvasDataV'].includes(showPosition) || disabled"
         :active="active"
         :show-position="showPosition"
+        :suffixId="suffixId"
       />
       <de-indicator
         :scale="scale"
@@ -1021,6 +1029,7 @@ const allEmptyCheck = computed(() => {
         ref="chartComponent"
         :view="view"
         :show-position="showPosition"
+        :suffixId="suffixId"
       />
       <chart-component-g2-plot
         :scale="scale"
@@ -1028,6 +1037,7 @@ const allEmptyCheck = computed(() => {
         :view="view"
         :show-position="showPosition"
         :element="element"
+        :suffixId="suffixId"
         v-else-if="
           showChartView(ChartLibraryType.G2_PLOT, ChartLibraryType.L7_PLOT, ChartLibraryType.L7)
         "
@@ -1050,6 +1060,7 @@ const allEmptyCheck = computed(() => {
         @onChartClick="chartClick"
         @onDrillFilters="onDrillFilters"
         @onJumpClick="jumpClick"
+        :suffixId="suffixId"
       />
     </div>
     <chart-empty-info