center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
wangjiahao 2024-09-12 17:09:59 +08:00
parent a24f1eb7c6
commit c5e2eac8c3
10 changed files with 93 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/core-frontend/src/custom-component/component-group/MediaGroup.vue
View File

@ -28,8 +28,8 @@ const props = defineProps({
})
const { dvModel } = toRefs(props)
const newComponent = params => {
eventBus.emit('handleNew', { componentName: params, innerType: params })
const newComponent = (componentName, innerType) => {
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"
v-on:click="newComponent('Picture')"
drag-info="UserView&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>

10
core/core-frontend/src/custom-component/component-list.ts
View File

@ -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,

3
core/core-frontend/src/utils/canvasUtils.ts
View File

@ -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 {

8
core/core-frontend/src/utils/components.ts
View File

@ -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]
}

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

@ -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"

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

@ -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'
}
]
}
]

19
core/core-frontend/src/views/chart/components/js/panel/charts/others/Picture.ts Normal file
View File

@ -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')
}
}

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

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

10
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -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"

29
core/core-frontend/src/views/dashboard/index.vue
View File

@ -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="
curComponent &&
!['UserView', 'VQuery'].includes(curComponent.component) &&
!batchOptStatus
"
v-if="otherEditorShow"
: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"