diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue index 56aee1c0e7..116571ac31 100644 --- a/core/core-frontend/src/custom-component/common/CommonAttr.vue +++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue @@ -11,6 +11,8 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue' import CommonEvent from '@/custom-component/common/CommonEvent.vue' import TabCarouselSetting from '@/custom-component/common/TabCarouselSetting.vue' +import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue' +import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue' const snapshotStore = snapshotStoreWithOut() const { t } = useI18n() @@ -94,6 +96,10 @@ const colorPickerWidth = computed(() => { } }) +const borderSettingShow = computed(() => { + return !!element.value.style['borderActive'] +}) + // 暂时关闭 const eventsShow = computed(() => { return ( @@ -178,6 +184,20 @@ const stopEvent = e => { > + + + +import { computed, reactive, ref, toRefs, watch } from 'vue' +import { ElFormItem, ElInputNumber } from 'element-plus-secondary' +import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' +import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import { storeToRefs } from 'pinia' +import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart' +const dvMainStore = dvMainStoreWithOut() + +const snapshotStore = snapshotStoreWithOut() +const { canvasStyleData } = storeToRefs(dvMainStore) + +const props = withDefaults( + defineProps<{ + themes?: EditorTheme + element: any + }>(), + { + themes: 'dark' + } +) +const emits = defineEmits(['onStyleAttrChange']) +const { themes, element } = toRefs(props) +const state = reactive({ + fontSize: [], + isSetting: false, + predefineColors: COLOR_PANEL +}) +const styleMounted = ref({ + borderWidth: 0, + borderRadius: 5 +}) + +const borderStyleList = [ + { name: '实线', value: 'solid' }, + { name: '虚线', value: 'dashed' }, + { name: '点线', value: 'dotted' } +] + +const styleInit = () => { + if (element.value) { + Object.keys(styleMounted.value).forEach(key => { + styleMounted.value[key] = Math.round( + (element.value.style[key] * 100) / canvasStyleData.value.scale + ) + }) + } +} + +const styleForm = computed(() => element.value.style) + +const changeStyle = params => { + snapshotStore.recordSnapshotCache() + emits('onStyleAttrChange', params) +} + +const changeStylePre = key => { + changeStyle({ key: key, value: element.value.style[key] }) +} + +const sizeChange = key => { + element.value.style[key] = Math.round( + (styleMounted.value[key] * canvasStyleData.value.scale) / 100 + ) + changeStyle({ key: key, value: element.value.style[key] }) +} + +watch( + () => element.value, + () => { + styleInit() + }, + { + deep: true, + immediate: true + } +) + + + + + diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index f18cde8084..9868416c47 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -5,7 +5,12 @@ import { getViewConfig } from '@/views/chart/components/editor/util/chart' export const commonStyle = { rotate: 0, - opacity: 1 + opacity: 1, + borderActive: false, + borderWidth: 1, + borderRadius: 5, + borderStyle: 'solid', + borderColor: '#cccccc' } // 轮询设置 @@ -466,11 +471,8 @@ const list = [ style: { width: 200, height: 200, - borderWidth: 1, - borderRadius: 5, - borderStyle: 'solid', - borderColor: '#cccccc', - backgroundColor: 'rgba(236,231,231,0.1)' + backgroundColor: 'rgba(236,231,231,0.1)', + borderActive: true } }, { diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index fc0e74841d..60c06f4382 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -120,6 +120,68 @@ function matrixAdaptor(componentItem) { } } +export function historyItemAdaptor( + componentItem, + reportFilterInfo, + attachInfo, + canvasVersion, + canvasInfo +) { + componentItem['canvasActive'] = false + // 定时报告过滤组件适配 如果当前是定时报告默认切有设置对应的过滤组件默认值，则替换过滤组件 + if ( + componentItem.component === 'VQuery' && + attachInfo.source === 'report' && + !!reportFilterInfo + ) { + componentItem.propValue.forEach((filterItem, index) => { + if (reportFilterInfo[filterItem.id]) { + componentItem.propValue[index] = JSON.parse(reportFilterInfo[filterItem.id].filterInfo) + } + }) + } + if (componentItem.component === 'Group') { + componentItem.expand = componentItem.expand || false + } + + if (componentItem.component === 'Picture') { + componentItem.style['adaptation'] = componentItem.style['adaptation'] || 'adaptation' + } + // public + componentItem['maintainRadio'] = componentItem['maintainRadio'] || false + componentItem['multiDimensional'] = + componentItem['multiDimensional'] || deepCopy(MULTI_DIMENSIONAL) + componentItem['carousel'] = componentItem['carousel'] || deepCopy(BASE_CAROUSEL) + componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1 + if (componentItem.component === 'UserView') { + componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION) + } + // 2 为基础版本 此处需要增加仪表板矩阵密度 + if ((!canvasVersion || canvasVersion === 2) && canvasInfo.type === 'dashboard') { + matrixAdaptor(componentItem) + } + // 组件事件适配 + componentItem.events = + componentItem.events && + componentItem.events.checked !== undefined && + componentItem.events.type !== 'displayChange' + ? componentItem.events + : deepCopy(BASE_EVENTS) + componentItem['category'] = componentItem['category'] || 'base' + + if (componentItem.component === 'DeTabs') { + componentItem.propValue.forEach(tabItem => { + tabItem.componentData.forEach(tabComponent => { + historyItemAdaptor(tabComponent, reportFilterInfo, attachInfo, canvasVersion, canvasInfo) + }) + }) + } else if (componentItem.component === 'Group') { + componentItem.propValue.forEach(groupItem => { + historyItemAdaptor(groupItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo) + }) + } +} + export function historyAdaptor( canvasStyleResult, canvasDataResult, @@ -138,47 +200,7 @@ export function historyAdaptor( canvasStyleResult['popupAvailable'] === undefined ? true : canvasStyleResult['popupAvailable'] //兼容弹框区域开关 const reportFilterInfo = canvasInfo.reportFilterInfo canvasDataResult.forEach(componentItem => { - componentItem['canvasActive'] = false - // 定时报告过滤组件适配 如果当前是定时报告默认切有设置对应的过滤组件默认值，则替换过滤组件 - if ( - componentItem.component === 'VQuery' && - attachInfo.source === 'report' && - !!reportFilterInfo - ) { - componentItem.propValue.forEach((filterItem, index) => { - if (reportFilterInfo[filterItem.id]) { - componentItem.propValue[index] = JSON.parse(reportFilterInfo[filterItem.id].filterInfo) - } - }) - } - if (componentItem.component === 'Group') { - componentItem.expand = componentItem.expand || false - } - - if (componentItem.component === 'Picture') { - componentItem.style['adaptation'] = componentItem.style['adaptation'] || 'adaptation' - } - // public - componentItem['maintainRadio'] = componentItem['maintainRadio'] || false - componentItem['multiDimensional'] = - componentItem['multiDimensional'] || deepCopy(MULTI_DIMENSIONAL) - componentItem['carousel'] = componentItem['carousel'] || deepCopy(BASE_CAROUSEL) - componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1 - if (componentItem.component === 'UserView') { - componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION) - } - // 2 为基础版本 此处需要增加仪表板矩阵密度 - if ((!canvasVersion || canvasVersion === 2) && canvasInfo.type === 'dashboard') { - matrixAdaptor(componentItem) - } - // 组件事件适配 - componentItem.events = - componentItem.events && - componentItem.events.checked !== undefined && - componentItem.events.type !== 'displayChange' - ? componentItem.events - : deepCopy(BASE_EVENTS) - componentItem['category'] = componentItem['category'] || 'base' + historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo) }) }