feat:组件添加绕x轴y轴扭曲配置项

1 year ago · d4674f8f7e
parent dade1b89fd
commit d4674f8f7e
64 changed files with 212 additions and 60 deletions
--- a/data-room-ui/packages/BasicComponents/Button/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Button/settingConfig.js
@ -45,7 +45,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  // 自定义属性
  customize: {
--- a/data-room-ui/packages/BasicComponents/ChartTab/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ChartTab/settingConfig.js
@ -23,7 +23,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    tabList: [],
--- a/data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js
@ -24,7 +24,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    fontSize: 28,
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
@ -26,7 +26,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  // 自定义属性
  customize: {
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js
@ -39,7 +39,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    color: '#fff',
--- a/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js
@ -45,7 +45,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 地图id
--- a/data-room-ui/packages/BasicComponents/HorizontalLine/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/HorizontalLine/settingConfig.js
@ -20,7 +20,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框线颜色
--- a/data-room-ui/packages/BasicComponents/IframeChart/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/IframeChart/settingConfig.js
@ -27,7 +27,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    fontSize: 20,
--- a/data-room-ui/packages/BasicComponents/IndexCard/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/IndexCard/settingConfig.js
@ -44,7 +44,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    src: '',
--- a/data-room-ui/packages/BasicComponents/IndexCard2/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/IndexCard2/settingConfig.js
@ -44,7 +44,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    src: '',
--- a/data-room-ui/packages/BasicComponents/IndicatorCard/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/IndicatorCard/settingConfig.js
@ -44,7 +44,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    borderRadius: 0,
--- a/data-room-ui/packages/BasicComponents/IndicatorCard2/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/IndicatorCard2/settingConfig.js
@ -44,7 +44,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    borderRadius: 0,
--- a/data-room-ui/packages/BasicComponents/Input/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Input/settingConfig.js
@ -21,7 +21,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  // 自定义属性
  customize: {
--- a/data-room-ui/packages/BasicComponents/LinkChart/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/LinkChart/settingConfig.js
@ -38,7 +38,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    title: '超链接占位符',
--- a/data-room-ui/packages/BasicComponents/Map/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Map/settingConfig.js
@ -46,7 +46,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    mapId: '',
--- a/data-room-ui/packages/BasicComponents/Marquee/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Marquee/settingConfig.js
@ -38,7 +38,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    title: '跑马灯占位符',
--- a/data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Numbers/settingConfig.js
@ -48,7 +48,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    title: '1234',
--- a/data-room-ui/packages/BasicComponents/Picture/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Picture/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    url: '',
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue
@ -128,13 +128,15 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
 export default {
  name: 'BarSetting',
  components: {
    ColorPicker,
    PosWhSetting,
    SettingTitle,
-    BorderSetting
+    BorderSetting,
+    RotateSetting
  },
  data () {
    return {
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js
@ -41,7 +41,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    rowNum: 5,
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
@ -34,7 +34,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    rowNum: 5,
--- a/data-room-ui/packages/BasicComponents/Select/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Select/settingConfig.js
@ -33,7 +33,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  // 自定义属性
  customize: {
--- a/data-room-ui/packages/BasicComponents/Tables/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Tables/settingConfig.js
@ -43,7 +43,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 500
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },

  customize: {
--- a/data-room-ui/packages/BasicComponents/Texts/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Texts/settingConfig.js
@ -48,7 +48,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    title: '文本标签占位符',
--- a/data-room-ui/packages/BasicComponents/ThemeSelect/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ThemeSelect/settingConfig.js
@ -26,7 +26,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    title: '文本标签占位符',
--- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js
@ -26,7 +26,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    activeColor: '#007aff', // 单选框字体激活状态
--- a/data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js
@ -23,7 +23,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    fontSize: 28,
--- a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
@ -26,7 +26,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  // 自定义属性
  customize: {
--- a/data-room-ui/packages/BasicComponents/VerticalLine/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/VerticalLine/settingConfig.js
@ -20,7 +20,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框线颜色
--- a/data-room-ui/packages/BasicComponents/Video/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Video/settingConfig.js
@ -20,7 +20,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    videoType: 'application/x-mpegURL',
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue
@ -51,6 +51,30 @@
        :step="1"
      />
    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="沿x轴扭曲角度"
+    >
+      <el-input-number
+        v-model="config.skewX"
+        class="bs-el-input-number"
+        :min="-180"
+        :max="180"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="绕y轴扭曲角度"
+    >
+      <el-input-number
+        v-model="config.skewY"
+        class="bs-el-input-number"
+        :min="-180"
+        :max="180"
+        :step="1"
+      />
+    </el-form-item>
  </div>
 </template>
 <script>
@ -63,7 +87,9 @@ export default {
        rotateX: 0,
        rotateY: 0,
        rotateZ: 0,
-        perspective: 0
+        perspective: 0,
+        skewX: 0,
+        skewY: 0
      })
    },
    labelWidth: {
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
@ -119,6 +119,8 @@ export default {
        rotateY: this.config?.rotateY,
        rotateZ: this.config?.rotateZ,
        perspective: this.config?.perspective,
+        skewX: this.config?.skewX,
+        skewY: this.config?.skewY,
        setting: cloneDeep(this.config?.setting),
        customize: cloneDeep(this.config?.customize),
        url: this.config?.url,
--- a/data-room-ui/packages/Borders/Border1/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border1/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    borderMainColor: '#83bff6',
--- a/data-room-ui/packages/Borders/Border10/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border10/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border11/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border11/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border12/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border12/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border13/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border13/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border14/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border14/settingConfig.js
@ -19,7 +19,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框线颜色
--- a/data-room-ui/packages/Borders/Border15/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border15/settingConfig.js
@ -19,7 +19,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框线颜色
--- a/data-room-ui/packages/Borders/Border2/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border2/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    borderMainColor: '#83bff6',
--- a/data-room-ui/packages/Borders/Border3/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border3/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    borderMainColor: '#83bff6',
--- a/data-room-ui/packages/Borders/Border4/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border4/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border5/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border5/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border6/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border6/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border7/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border7/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border8/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border8/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Borders/Border9/settingConfig.js
+++ b/data-room-ui/packages/Borders/Border9/settingConfig.js
@ -29,7 +29,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    // 边框主要颜色
--- a/data-room-ui/packages/Decorations/Decoration1/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration1/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#fff',
--- a/data-room-ui/packages/Decorations/Decoration10/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration10/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#00c2ff',
--- a/data-room-ui/packages/Decorations/Decoration11/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration11/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#1a98fc',
--- a/data-room-ui/packages/Decorations/Decoration12/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration12/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: null,
--- a/data-room-ui/packages/Decorations/Decoration2/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration2/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#3faacb',
--- a/data-room-ui/packages/Decorations/Decoration3/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration3/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#7acaec',
--- a/data-room-ui/packages/Decorations/Decoration4/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration4/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: 'rgba(255, 255, 255, 0.3)',
--- a/data-room-ui/packages/Decorations/Decoration4Reverse/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration4Reverse/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: 'rgba(255, 255, 255, 0.3)',
--- a/data-room-ui/packages/Decorations/Decoration5/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration5/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#3f96a5',
--- a/data-room-ui/packages/Decorations/Decoration6/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration6/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1:'#7acaec',
--- a/data-room-ui/packages/Decorations/Decoration8/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration8/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#3f96a5',
--- a/data-room-ui/packages/Decorations/Decoration8Reverse/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration8Reverse/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: '#3f96a5',
--- a/data-room-ui/packages/Decorations/Decoration9/settingConfig.js
+++ b/data-room-ui/packages/Decorations/Decoration9/settingConfig.js
@ -25,7 +25,9 @@ const customConfig = {
    // 绕z轴旋转角度
    rotateZ: 0,
    // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
  },
  customize: {
    decorationColor1: 'rgba(3, 166, 224, 0.8)',
--- a/data-room-ui/packages/Echarts/echartList.js
+++ b/data-room-ui/packages/Echarts/echartList.js
@ -35,6 +35,8 @@ function getEchartsList (files) {
      rotateY: config.rotateY || 0,
      rotateZ: config.rotateZ || 0,
      perspective: config.perspective || 0,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
      type: 'echartsComponent',
      loading: false,
      // 把默认右侧配置与自定义右侧配置集合
--- a/data-room-ui/packages/G2Plots/plotList.js
+++ b/data-room-ui/packages/G2Plots/plotList.js
@ -45,6 +45,8 @@ function getPlotList (files) {
      rotateY: config.rotateY || 0,
      rotateZ: config.rotateZ || 0,
      perspective: config.perspective || 0,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
      type: 'customComponent',
      chartType: config.chartType,
      loading: false,
--- a/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
+++ b/data-room-ui/packages/RemoteComponents/remoteComponentsList.js
@ -43,6 +43,8 @@ export function getRemoteComponents (comList) {
      rotateY: config.rotateY || 0,
      rotateZ: config.rotateZ || 0,
      perspective: config.perspective || 500,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
      type: 'remoteComponent',
      option: {
        ...cloneDeep(settingConfig),
@ -79,6 +81,8 @@ export function getRemoteComponentConfig (code, name) {
    rotateY: 0,
    rotateZ: 0,
    perspective: 0,
+    skewX: 0,
+    skewY: 0,
    type: 'remoteComponent',
    option: {
      ...cloneDeep(settingConfig)
--- a/data-room-ui/packages/Render/index.vue
+++ b/data-room-ui/packages/Render/index.vue
@ -38,7 +38,7 @@
      :style="{
        zIndex: chart.z || 0,
      }"
-      :transform="`perspective(${chart.perspective > 0? (chart.perspective + 'px') : 'none' }) rotateX(${chart.rotateX == undefined ? 0 : chart.rotateX}deg) rotateY(${chart.rotateY == undefined ? 0 : chart.rotateY}deg)  rotateZ(${chart.rotateZ == undefined ? 0 : chart.rotateZ}deg)`"
+      :transform="`perspective(${chart.perspective > 0? (chart.perspective + 'px') : 'none' }) rotateX(${chart.rotateX == undefined ? 0 : chart.rotateX}deg) rotateY(${chart.rotateY == undefined ? 0 : chart.rotateY}deg)  rotateZ(${chart.rotateZ == undefined ? 0 : chart.rotateZ}deg) skew(${chart.skewX == undefined ? 0 : chart.skewX}deg, ${chart.skewY == undefined? 0 : chart.skewY}deg)`"
      :grid="[1,1]"
      :handles="handlesList"
      class-name-handle="bs-handle-class"