Merge pull request #12176 from dataease/pr@dev-v2@feat_new-picture-component

feat(仪表板、数据大屏): 图片组件支持绑定数据集

core/core-frontend/src/custom-component/component-group/MediaGroup.vue

@@ -28,8 +28,8 @@ const props = defineProps({
 })
 
 const { dvModel } = toRefs(props)
-const newComponent = params => {
+const newComponent = (componentName, innerType) => {
-  eventBus.emit('handleNew', { componentName: params, innerType: params })
+  eventBus.emit('handleNew', { componentName: componentName, innerType: innerType })
 }
 
 const handleDragStart = e => {
@@ -47,22 +47,22 @@ const handleDragEnd = e => {
       :themes="themes"
       icon="dv-picture-show"
       label="图片"
-      drag-info="Picture&Picture"
+      drag-info="UserView&Picture"
-      v-on:click="newComponent('Picture')"
+      v-on:click="newComponent('UserView', 'Picture')"
     ></drag-component>
     <drag-component
       :themes="themes"
       icon="icon-video"
       label="视频"
       drag-info="DeVideo&DeVideo"
-      v-on:click="newComponent('DeVideo')"
+      v-on:click="newComponent('DeVideo', 'DeVideo')"
     ></drag-component>
     <drag-component
       :themes="themes"
       icon="icon-stream"
       label="流媒体"
       drag-info="DeStreamMedia&DeStreamMedia"
-      v-on:click="newComponent('DeStreamMedia')"
+      v-on:click="newComponent('DeStreamMedia', 'DeStreamMedia')"
     ></drag-component>
   </div>
 </template>

core/core-frontend/src/custom-component/component-list.ts

@@ -306,7 +306,15 @@ const list = [
     component: 'UserView',
     name: '图表',
     label: '图表',
-    propValue: { textValue: '' },
+    propValue: {
+      textValue: '',
+      url: '',
+      pictureShowType: 'common', // 图片显示方式 common 正常显示 dataset 绑定数据集显示
+      flip: {
+        horizontal: false,
+        vertical: false
+      }
+    },
     icon: 'bar',
     innerType: 'bar',
     editing: false,

core/core-frontend/src/utils/canvasUtils.ts

@@ -61,6 +61,9 @@ export function findNewComponent(componentName, innerType, staticMap?) {
           textValue: ''
         }
       }
+      if (newComponent.innerType === 'Picture') {
+        newComponent.style['adaptation'] = 'adaptation'
+      }
       if (dvMainStore.curOriginThemes === 'light') {
         newComponent['commonBackground'] = cloneDeep(COMMON_COMPONENT_BACKGROUND_LIGHT)
       } else {

core/core-frontend/src/utils/components.ts

@@ -78,3 +78,11 @@ export const componentsMap = {
 export default function findComponent(key) {
   return componentsMap[key]
 }
+
+export function findComponentAttr(component) {
+  const key =
+    component.component === 'UserView' && component.innerType === 'Picture'
+      ? 'PictureAttr'
+      : component.component + 'Attr'
+  return componentsMap[key]
+}

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

@@ -253,7 +253,7 @@ const getFields = (id, chartId, type) => {
 
 const chartStyleShow = computed(() => {
   return (
-    view.value.type !== 'richText' &&
+    !['richText', 'Picture'].includes(view.value.type) &&
     curComponent.value &&
     curComponent.value.component === 'UserView'
   )
@@ -1770,7 +1770,10 @@ const deleteChartFieldItem = id => {
               <el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
                 <el-container direction="vertical">
                   <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
-                    <el-row v-if="view.type !== 'rich-text'" class="drag-data padding-lr">
+                    <el-row
+                      v-if="!['rich-text', 'Picture'].includes(view.type)"
+                      class="drag-data padding-lr"
+                    >
                       <span class="data-area-label">{{ t('chart.switch_chart') }}</span>
                       <el-popover
                         :offset="4"

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1505,6 +1505,20 @@ export const CHART_TYPE_CONFIGS = [
         icon: 'rich-text'
       }
     ]
+  },
+  {
+    category: 'other',
+    title: '图片',
+    display: 'hidden',
+    details: [
+      {
+        render: 'custom',
+        category: 'quota',
+        value: 'Picture',
+        title: '图片',
+        icon: 'picture'
+      }
+    ]
   }
 ]
 

core/core-frontend/src/views/chart/components/js/panel/charts/others/Picture.ts

@@ -0,0 +1,19 @@
+import { AbstractChartView, ChartLibraryType, ChartRenderType } from '../../types'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+/**
+ * 富文本图表
+ */
+export class PictureChartView extends AbstractChartView {
+  properties: EditorProperty[] = ['background-overall-component', 'border-style']
+  propertyInner: EditorPropertyInner = {
+    'background-overall-component': ['all'],
+    'border-style': ['all']
+  }
+  axis: AxisType[] = ['filter']
+  axisConfig: AxisConfig = {}
+  constructor() {
+    super(ChartRenderType.CUSTOM, ChartLibraryType.PICTURE, 'Picture')
+  }
+}

core/core-frontend/src/views/chart/components/js/panel/types/index.ts

@@ -15,6 +15,7 @@ export enum ChartLibraryType {
   ECHARTS = 'echarts',
   S2 = 's2',
   RICH_TEXT = 'rich-text',
+  PICTURE = 'Picture',
   INDICATOR = 'indicator'
 }
 export abstract class ChartWrapper<O> {

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

@@ -43,6 +43,7 @@ import { storeToRefs } from 'pinia'
 import { checkAddHttp, setIdValueTrans } from '@/utils/canvasUtils'
 import { Base64 } from 'js-base64'
 import DeRichTextView from '@/custom-component/rich-text/DeRichTextView.vue'
+import DePictureV2 from '@/custom-component/picture/Component.vue'
 import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { viewFieldTimeTrans } from '@/utils/viewUtils'
@@ -120,7 +121,7 @@ const { view, showPosition, element, active, searchCount, scale } = toRefs(props
 
 const titleShow = computed(
   () =>
-    element.value.innerType !== 'rich-text' &&
+    !['rich-text', 'Picture'].includes('rich-text') &&
     state.title_show &&
     showPosition.value !== 'viewDialog'
 )
@@ -672,7 +673,7 @@ const chartAreaShow = computed(() => {
       return true
     }
   }
-  if (view.value.type === 'rich-text') {
+  if (['rich-text', 'Picture'].includes(view.value.type)) {
     return true
   }
   if (view.value?.isPlugin) {
@@ -895,6 +896,11 @@ const loadPluginCategory = data => {
         @onJumpClick="jumpClick"
         @resetLoading="() => (loading = false)"
       />
+      <de-picture-v2
+        :element="element"
+        :prop-value="element.propValue"
+        v-else-if="showChartView(ChartLibraryType.PICTURE)"
+      ></de-picture-v2>
       <de-rich-text-view
         v-else-if="showChartView(ChartLibraryType.RICH_TEXT)"
         :themes="canvasStyleData.dashboard.themeColor"

core/core-frontend/src/views/dashboard/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import findComponent from '../../utils/components'
+import { findComponentAttr } from '../../utils/components'
 import DvSidebar from '../../components/visualization/DvSidebar.vue'
 import router from '@/router'
 import MobileConfigPanel from './MobileConfigPanel.vue'
@@ -75,10 +75,25 @@ const initDataset = () => {
   })
 }
 
+const otherEditorShow = computed(() => {
+  return Boolean(
+    curComponent.value &&
+      (!['UserView', 'VQuery'].includes(curComponent.value?.component) ||
+        (curComponent.value?.component === 'UserView' &&
+          curComponent.value?.innerType === 'Picture')) &&
+      !batchOptStatus.value
+  )
+})
+
+const otherEditorTitle = computed(() => {
+  return curComponent.value?.component === 'UserView' ? '属性' : curComponent.value?.label || '属性'
+})
+
 const viewEditorShow = computed(() => {
   return Boolean(
     curComponent.value &&
       ['UserView', 'VQuery'].includes(curComponent.value.component) &&
+      curComponent.value.innerType !== 'Picture' &&
       !batchOptStatus.value
   )
 })
@@ -260,19 +275,15 @@ onUnmounted(() => {
       </main>
       <!-- 右侧侧组件列表 -->
       <dv-sidebar
-        v-if="
+        v-if="otherEditorShow"
-          curComponent &&
-          !['UserView', 'VQuery'].includes(curComponent.component) &&
-          !batchOptStatus
-        "
         :theme-info="'light'"
-        :title="curComponent.label || '属性'"
+        :title="otherEditorTitle"
         :width="420"
         :side-name="'componentProp'"
         :aside-position="'right'"
         class="left-sidebar"
       >
-        <component :is="findComponent(curComponent['component'] + 'Attr')" :themes="'light'" />
+        <component :is="findComponentAttr(curComponent)" :themes="'light'" />
       </dv-sidebar>
       <dv-sidebar
         v-show="!curComponent && !batchOptStatus"