diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json index 57f0d3e610..b70396c3a4 100644 --- a/core/core-frontend/package.json +++ b/core/core-frontend/package.json @@ -27,7 +27,7 @@ "axios": "^1.3.3", "crypto-js": "^4.1.1", "dayjs": "^1.11.9", - "element-plus-secondary": "^0.5.10", + "element-plus-secondary": "^0.5.11", "element-resize-detector": "^1.2.4", "file-saver": "^2.0.5", "flv.js": "^1.6.2", diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue index 32d255d686..752f4c532c 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/core/core-frontend/src/custom-component/v-query/Component.vue @@ -24,7 +24,6 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { comInfo } from './com-info' import { useEmitt } from '@/hooks/web/useEmitt' import StyleInject from './StyleInject.vue' -import { backgroundSize } from 'html2canvas/dist/types/css/property-descriptors/background-size' const props = defineProps({ view: { type: Object, @@ -72,7 +71,6 @@ const defaultStyle = { textColorShow: false, bgColorShow: false, borderShow: false, - labelColorShow: false, labelShow: true, title: '', labelColor: '#1f2329', @@ -91,6 +89,26 @@ const defaultStyle = { const customStyle = reactive({ ...defaultStyle }) const snapshotStore = snapshotStoreWithOut() +const btnStyle = computed(() => { + const style = { + backgroundColor: customStyle.btnColor, + borderColor: customStyle.btnColor, + color: customStyle.labelColorBtn + } as CSSProperties + if (customStyle.fontSizeBtn) { + style.fontSize = customStyle.fontSizeBtn + 'px' + } + + if (customStyle.fontWeightBtn) { + style.fontWeight = customStyle.fontWeightBtn + } + + if (customStyle.fontStyleBtn) { + style.fontStyle = customStyle.fontStyleBtn + } + + return style +}) const curComponentView = computed(() => { return (canvasViewInfo.value[element.value.id] || {}).customStyle }) @@ -141,11 +159,11 @@ const setCustomStyle = val => { customStyle.fontSizeBtn = fontSizeBtn || '14' customStyle.fontWeightBtn = fontWeightBtn customStyle.fontStyleBtn = fontStyleBtn - customStyle.queryConditionWidth = queryConditionWidth || 227 - customStyle.nameboxSpacing = nameboxSpacing || 8 - customStyle.queryConditionSpacing = queryConditionSpacing || 16 + customStyle.queryConditionWidth = queryConditionWidth ?? 227 + customStyle.nameboxSpacing = nameboxSpacing ?? 8 + customStyle.queryConditionSpacing = queryConditionSpacing ?? 16 customStyle.labelColorBtn = labelColorBtn || '#ffffff' - customStyle.labelShow = labelShow || true + customStyle.labelShow = labelShow ?? true customStyle.btnColor = btnColor || '#3370ff' } @@ -232,10 +250,14 @@ const queryDataForId = id => { emitter.emit(`query-data-${ele}`) }) } - +const getQueryConditionWidth = () => { + return customStyle.queryConditionWidth +} provide('unmount-select', unMountSelect) provide('release-unmount-select', releaseSelect) provide('query-data-for-id', queryDataForId) +provide('com-width', getQueryConditionWidth) + onBeforeUnmount(() => { emitter.off(`addQueryCriteria${element.value.id}`) emitter.off(`editQueryCriteria${element.value.id}`) @@ -420,9 +442,21 @@ const titleStyle = computed(() => { }) const labelStyle = computed(() => { - return { - color: customStyle.labelColor || '#1f2329' + const style = { + fontSize: customStyle.fontSize + 'px' } as CSSProperties + if (customStyle.fontWeight) { + style.fontWeight = customStyle.fontWeight + } + + if (customStyle.fontStyle) { + style.fontStyle = customStyle.fontStyle + } + + if (customStyle.labelColor) { + style.color = customStyle.labelColor + } + return style }) const autoStyle = computed(() => { return { @@ -464,9 +498,14 @@ const autoStyle = computed(() => {