refactor(数据大屏): 优化大屏拖拽逻辑和样式

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -539,7 +539,8 @@ const getShapeItemShowStyle = item => {
     dvModel: dvInfo.value.type,
     cellWidth: cellWidth.value,
     cellHeight: cellHeight.value,
-    curGap: curGap.value
+    curGap: curGap.value,
+    showPosition: 'edit'
   })
 }
 

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -16,6 +16,20 @@ const componentEditBarRef = ref(null)
 const dvMainStore = dvMainStoreWithOut()
 const downLoading = ref(false)
 
+const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
+const commonFilterAttrsFilterBorder = [
+  'width',
+  'height',
+  'top',
+  'left',
+  'rotate',
+  'borderActive',
+  'borderWidth',
+  'borderRadius',
+  'borderStyle',
+  'borderColor'
+]
+
 const props = defineProps({
   active: {
     type: Boolean,
@@ -144,7 +158,7 @@ const getComponentStyleDefault = style => {
   if (config.value.component.includes('Svg')) {
     return getStyle(style, ['top', 'left', 'width', 'height', 'rotate', 'backgroundColor'])
   } else {
-    return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
+    return getStyle(style, style.borderActive ? commonFilterAttrs : commonFilterAttrsFilterBorder)
   }
 }
 

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -192,14 +192,6 @@ const resetLayout = () => {
       //div容器获取tableBox.value.clientWidth
       let canvasWidth = previewCanvas.value.clientWidth
       let canvasHeight = previewCanvas.value.clientHeight
-      console.log(
-        '===canvasId=' +
-          canvasId.value +
-          ';canvasWidth =' +
-          canvasWidth +
-          ';canvasHeight =' +
-          canvasHeight
-      )
       scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
       scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
       scaleMin.value = isDashboard()
@@ -220,6 +212,7 @@ const resetLayout = () => {
           scaleMin.value,
           scaleMinHeight
         )
+        scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100
       }
       renderReady.value = true
       emits('onResetLayout')

core/core-frontend/src/components/visualization/common/DeFullscreen.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     default: 'preview'
   }
 })
-const { themes, componentType } = toRefs(props)
+const { themes } = toRefs(props)
 
 const fullscreenChange = () => {
   if (screenfull.isEnabled) {

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

@@ -187,6 +187,7 @@ const stopEvent = e => {
       <collapse-switch-item
         v-if="element && borderSettingShow"
         v-model="element.style.borderActive"
+        @modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
         :themes="themes"
         title="边框"
         name="borderSetting"

core/core-frontend/src/utils/style.ts

@@ -17,7 +17,10 @@ export function getShapeStyle(style) {
   return result
 }
 
-export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap }) {
+export function getShapeItemStyle(
+  item,
+  { dvModel, cellWidth, cellHeight, curGap, showPosition = 'preview' }
+) {
   let result = {}
   if (dvModel === 'dashboard' && !item['isPlayer']) {
     result = {
@@ -27,11 +30,7 @@ export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap
       left: cellWidth * (item.x - 1) + 'px',
       top: cellHeight * (item.y - 1) + 'px'
     }
-  } else if (
-    dvModel === 'dataV' &&
-    isTabCanvas(item.canvasId) &&
-    dvMainStore.editMode === 'preview'
-  ) {
+  } else if (dvModel === 'dataV' && isTabCanvas(item.canvasId) && showPosition === 'preview') {
     result = {
       padding: curGap + 'px!important',
       width: toPercent(item.groupStyle.width),

core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue

@@ -338,6 +338,7 @@ watch(
           <collapse-switch-item
             v-if="showProperties('border-style') && commonBorderPop"
             v-model="commonBorderPop.borderActive"
+            @modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
             :themes="themes"
             title="边框"
             name="borderSetting"

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -234,18 +234,22 @@ const renderChart = async (view, callback?) => {
 }
 let myChart = null
 const renderG2Plot = async (chart, chartView: G2PlotChartView<any, any>) => {
-  myChart?.destroy()
-  myChart = await chartView.drawChart({
-    chartObj: myChart,
-    container: containerId,
-    chart: chart,
-    scale: 1,
-    action,
-    quadrantDefaultBaseline
-  })
-  myChart?.render()
-  if (linkageActiveHistory.value) {
-    linkageActive()
+  try {
+    myChart?.destroy()
+    myChart = await chartView.drawChart({
+      chartObj: myChart,
+      container: containerId,
+      chart: chart,
+      scale: 1,
+      action,
+      quadrantDefaultBaseline
+    })
+    myChart?.render()
+    if (linkageActiveHistory.value) {
+      linkageActive()
+    }
+  } catch (e) {
+    console.error('renderG2Plot error', e)
   }
 }