feat(仪表板、数据大屏): 支持传统边框

This commit is contained in:
wangjiahao 2024-08-13 12:30:06 +08:00
parent 9d0453e1ea
commit 7bcd461ddc
3 changed files with 161 additions and 6 deletions

View File

@ -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 => {
>
<common-event :themes="themes" :events-info="element.events"></common-event>
</el-collapse-item>
<collapse-switch-item
v-if="element && borderSettingShow"
v-model="element.value.style.borderActive"
:themes="themes"
title="边框"
name="borderSetting"
class="common-style-area"
>
<common-border-setting
:element="element"
:themes="themes"
@onStyleAttrChange="onStyleAttrChange"
></common-border-setting>
</collapse-switch-item>
<TabCarouselSetting
v-if="carouselShow"
:element="element"

View File

@ -0,0 +1,133 @@
<script setup lang="ts">
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<any>(() => 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
}
)
</script>
<template>
<el-row class="custom-row">
<el-form label-position="top">
<el-form-item label="颜色" class="form-item" :class="'form-item-' + themes">
<el-color-picker
title="颜色"
v-model="styleForm.borderColor"
class="color-picker-style"
:triggerWidth="50"
is-custom
:predefine="state.predefineColors"
@change="changeStylePre('borderColor')"
>
</el-color-picker>
</el-form-item>
<el-form-item label="圆角" class="form-item" :class="'form-item-' + themes">
<el-input-number
title="圆角"
v-model="styleForm.borderRadio"
class="color-picker-style"
@change="sizeChange('borderWidth')"
>
</el-input-number>
</el-form-item>
<el-form-item label="样式" class="form-item" :class="'form-item-' + themes">
<el-select
:effect="themes"
v-model="styleForm.borderStyle"
size="small"
@change="changeStylePre('borderStyle')"
>
<el-option
class="custom-style-option"
v-for="option in borderStyleList"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label="线宽" class="form-item" :class="'form-item-' + themes">
<el-input-number
title="线宽"
v-model="styleForm.borderWidth"
class="color-picker-style"
@change="sizeChange('borderWidth')"
>
</el-input-number>
</el-form-item>
</el-form>
</el-row>
</template>
<style scoped lang="less"></style>

View File

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