fix:修复3D组件旋转属性绑定问题

data-room-ui/packages/BigScreenDesign/RightSetting/EchartsCustomSetting.vue

@@ -118,11 +118,6 @@
                   class="bs-el-color-picker"
                   show-alpha
                 />
-                <!-- 渐变色设置 -->
-                <GradualSetting
-                  v-else-if="setting.type === 'gradual'"
-                  v-model="setting.value"
-                />
                 <el-input-number
                   v-else-if="setting.type === 'inputNumber'"
                   v-model="setting.value"
@@ -179,7 +174,6 @@ import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
 import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
 // import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PaddingSetting from 'data-room-ui/BigScreenDesign/RightSetting/PaddingSetting/index.vue'
-import GradualSetting from 'data-room-ui/BigScreenDesign/RightSetting/GradualSetting/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
 export default {
@@ -188,7 +182,6 @@ export default {
     ColorSelect,
     // ColorPicker,
     PaddingSetting,
-    GradualSetting,
     PosWhSetting,
     BorderSetting,
     SettingTitle,

data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue

@@ -4,6 +4,17 @@
 
 <template>
   <div>
+    <el-form-item
+      :label-width="labelWidth"
+      label="透视距离"
+    >
+      <el-input-number
+        v-model="config.perspective"
+        class="bs-el-input-number"
+        :min="0"
+        :step="1"
+      />
+    </el-form-item>
     <el-form-item
       :label-width="labelWidth"
       label="绕x轴旋转角度"
@@ -27,7 +38,8 @@
         :max="360"
         :step="1"
       />
-    </el-form-item> <el-form-item
+    </el-form-item>
+    <el-form-item
       :label-width="labelWidth"
       label="绕z轴旋转角度"
     >
@@ -50,7 +62,8 @@ export default {
       default: () => ({
         rotateX: 0,
         rotateY: 0,
-        rotateZ: 0
+        rotateZ: 0,
+        perspective: 500
       })
     },
     labelWidth: {

data-room-ui/packages/BigScreenDesign/RightSetting/index.vue

@@ -118,6 +118,7 @@ export default {
         rotateX: this.config?.rotateX,
         rotateY: this.config?.rotateY,
         rotateZ: this.config?.rotateZ,
+        perspective: this.config?.perspective,
         setting: cloneDeep(this.config?.setting),
         customize: cloneDeep(this.config?.customize),
         url: this.config?.url,

data-room-ui/packages/Echarts/echartList.js

@@ -31,9 +31,10 @@ function getEchartsList (files) {
       h: config?.option?.height || 320,
       x: 0,
       y: 0,
-      rotateX: 0,
+      rotateX: config.rotateX || 0,
-      rotateY: 0,
+      rotateY: config.rotateY || 0,
-      rotateZ: 0,
+      rotateZ: config.rotateZ || 0,
+      perspective: config.perspective || 500,
       type: 'echartsComponent',
       loading: false,
       // 把默认右侧配置与自定义右侧配置集合

data-room-ui/packages/EchartsRender/index.vue

@@ -75,37 +75,42 @@ export default {
     'config.rotateX': {
       deep: true,
       handler (val) {
+        const dom = document.querySelector('#' + this.config.code)
         const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg)  rotateZ(${this.config.rotateZ}deg)`
-        const dom1 = document.querySelector('.bs-design-wrap')
+        const regex = /rotateX\(\d+deg\) rotateY\(\d+deg\) rotateZ\(\d+deg\)/g
-        const dom2 = document.querySelector('.render-item-wrap')
+        // 提取出原本的transform属性内容
-        dom1.setAttribute('style', 'perspective: 500px;')
+        const result = dom.style.transform.replace(regex, '')
-        dom2.setAttribute('style', 'perspective: 500px;')
+        dom.style.transform = result + ' ' + rotate
-        dom1.setAttribute('style', 'transform:' + rotate)
-        dom2.setAttribute('style', 'transform:' + rotate)
       }
     },
     'config.rotateY': {
       deep: true,
       handler (val) {
+        const dom = document.querySelector('#' + this.config.code)
         const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg)  rotateZ(${this.config.rotateZ}deg)`
-        const dom1 = document.querySelector('.bs-design-wrap')
+        const regex = /rotateX\(\d+deg\) rotateY\(\d+deg\) rotateZ\(\d+deg\)/g;
-        const dom2 = document.querySelector('.render-item-wrap')
+        const result = dom.style.transform.replace(regex, '')
-        dom1.setAttribute('style', 'perspective: 500px;')
+        dom.style.transform = result + ' ' + rotate
-        dom2.setAttribute('style', 'perspective: 500px;')
-        dom1.setAttribute('style', 'transform:' + rotate)
-        dom2.setAttribute('style', 'transform:' + rotate)
       }
     },
     'config.rotateZ': {
       deep: true,
       handler (val) {
+        const dom = document.querySelector('#' + this.config.code)
         const rotate = `rotateX(${this.config.rotateX}deg) rotateY(${this.config.rotateY}deg)  rotateZ(${this.config.rotateZ}deg)`
-        const dom1 = document.querySelector('.bs-design-wrap')
+        const regex = /rotateX\(\d+deg\) rotateY\(\d+deg\) rotateZ\(\d+deg\)/g;
-        const dom2 = document.querySelector('.render-item-wrap')
+        const result = dom.style.transform.replace(regex, '')
-        dom1.setAttribute('style', 'perspective: 500px;')
+        dom.style.transform = result + ' ' + rotate
-        dom2.setAttribute('style', 'perspective: 500px;')
+      }
-        dom1.setAttribute('style', 'transform:' + rotate)
+    },
-        dom2.setAttribute('style', 'transform:' + rotate)
+    'config.perspective': {
+      deep: true,
+      handler (val) {
+        const dom = document.querySelector('#' + this.config.code)
+        const regex = /perspective\(\d+px\)/g
+        const result = dom.style.transform.replace(regex, '')
+        const transform = result + ' ' + 'perspective(' + this.config.perspective + 'px)'
+        dom.style.transform = transform
       }
     }
   },
@@ -507,8 +512,9 @@ export default {
         this.changeActiveItemConfig(config)
       }
       if (this.chart) {
-        this.chart.setOption(config.option)
+        // this.chart.setOption(config.option)
       }
+      // this.createRotate(config.code)
       return config
     }
   }