Merge pull request #11513 from dataease/pr@dev-v2@feat_border

Pr@dev v2@feat border

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 => {
       >
         <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"

core/core-frontend/src/custom-component/common/CommonBorderSetting.vue

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

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

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