feat:3D组件添加旋转配置项

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

@@ -0,0 +1,348 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      :rules="customRules"
+      label-width="120px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item
+          label="标题"
+          label-width="120px"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+            clearable
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>边框</SettingTitle>
+      <div class="lc-field-body">
+         <BorderSetting
+          v-if="config.border"
+          label-width="120px"
+          :config="config.border"
+          :bigTitle='config.title'
+        />
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="lc-field-body">
+        <PosWhSetting
+          label-width="120px"
+          :config="config"
+        />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+      <div class="lc-field-body">
+        <RotateSetting
+          :config="config"
+        />
+      </div>
+      <template v-for="group in groupList">
+        <div :key="group.groupName">
+          <SettingTitle>   {{ group.groupName | filterGroupName }}</SettingTitle>
+          <div class="lc-field-body">
+            <div
+              v-for="(setting, settingIndex) in group.list"
+              :key="settingIndex+1"
+            >
+              <el-form-item
+                :label="setting.type=== 'padding' ? '' : setting.label"
+                :label-width="setting.type=== 'padding' ? '0px' :'120px'"
+              >
+                <el-input
+                  v-if="setting.type === 'input'"
+                  v-model="setting.value"
+                  :placeholder="`请输入${setting.label}`"
+                  clearable
+                />
+                <el-select
+                  v-else-if="setting.type === 'select'"
+                  v-model="setting.value"
+                  popper-class="bs-el-select"
+                  class="bs-el-select"
+                  :placeholder="`请选择${setting.label}`"
+                  :multiple="setting.multiple"
+                  clearable
+                >
+                  <el-option
+                    v-for="(opt, optIndex) in setting.options"
+                    :key="optIndex"
+                    :label="opt.label"
+                    :value="opt.value"
+                  />
+                </el-select>
+                <template v-else-if="setting.type === 'colorSelect'">
+                  <color-select
+                    v-model="setting.value"
+                    @update="updateColorScheme"
+                  />
+                  <div
+                    style="
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                  "
+                    class="color-picker-box"
+                  >
+                    <el-color-picker
+                      v-for="(colorItem, colorItemIndex) in colors"
+                      :key="colorItemIndex"
+                      v-model="setting.value[colorItemIndex]"
+                      popper-class="bs-el-color-picker"
+                      show-alpha
+                      class="start-color"
+                    />
+                    <span
+                      class="el-icon-circle-plus-outline"
+                      style="color: #007aff; font-size: 20px"
+                      @click="addColor"
+                    />
+                    <span
+                      v-if="colors.length"
+                      class="el-icon-remove-outline"
+                      style="color: #ea0b30; font-size: 20px"
+                      @click="delColor()"
+                    />
+                  </div>
+                </template>
+                <el-color-picker
+                  v-else-if="setting.type === 'colorPicker'"
+                  v-model="setting.value"
+                  popper-class="bs-el-color-picker"
+                  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"
+                  class="bs-el-input-number"
+                  :step="setting.step || 1"
+                  :min="setting.min || 0"
+                  :max="setting.max || 100000"
+                />
+                <el-radio-group
+                  v-else-if="setting.type === 'radio'"
+                  v-model="setting.value"
+                  class="bs-el-radio-group"
+                >
+                  <template v-for="(opt, optIndex) in setting.options">
+                    <el-radio-button
+                      :key="optIndex"
+                      :label="opt.value"
+                    >
+                      {{ opt.label }}
+                    </el-radio-button>
+                  </template>
+                </el-radio-group>
+                <el-switch
+                  v-else-if="setting.type === 'switch'"
+                  v-model="setting.value"
+                  class="bs-el-switch"
+                  :active-value="setting.active"
+                  :inactive-value="setting.inactive"
+                />
+                <el-slider
+                  v-else-if="setting.type === 'slider'"
+                  v-model="setting.value"
+                  :min="0"
+                  :max="1"
+                  :step="0.01"
+                />
+                <PaddingSetting
+                  v-else-if="setting.type === 'padding'"
+                  v-model="setting.value"
+                />
+              </el-form-item>
+            </div>
+          </div>
+        </div>
+      </template>
+      <!-- </div> -->
+    </el-form>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+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 {
+  name: 'EchartsCustomSetting',
+  components: {
+    ColorSelect,
+    // ColorPicker,
+    PaddingSetting,
+    GradualSetting,
+    PosWhSetting,
+    BorderSetting,
+    SettingTitle,
+    RotateSetting
+  },
+  mixins: [chartSettingMixins],
+  data () {
+    return {
+      groupList: []
+    }
+  },
+  filters: {
+    filterGroupName (val) {
+      const settingGroup = {
+        basic: '基础',
+        position: '位置',
+        graph: '图表',
+        rotate: '旋转',
+        grid: '网格线',
+        legend: '图例',
+        xAxis: 'X轴',
+        yAxis: 'Y轴',
+        padding: '边距',
+        other: '其他'
+      }
+      return settingGroup[val]
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.commit('bigScreen/changeActiveItemConfig', val)
+      }
+    },
+    appCode: {
+      get () {
+        return this.$store.state.bigScreen.pageInfo.appCode
+      }
+    },
+    pageCode () {
+      return this.$route.query.code
+    }
+  },
+  watch: {
+    groupList: {
+      // 1、原数组，2、修改后的数组只包含custom，3、合并的时候xy的配置必须放在最前面
+      handler (val) {
+        const setList = [].concat(...val.map(item => item.list))
+        const newSetList = [...this.config.setting, ...setList]
+        let newArr = [] // 存新数组
+        const hash = {}
+        newArr = newSetList.reduce(function (acc, cru, index) {
+          if (!hash[cru.field]) {
+            hash[cru.field] = { index: index }
+            acc.push(cru)
+          } else {
+            acc.splice(hash[cru.field].index, 1, cru)
+          }
+          return acc
+        }, [])
+        this.$store.commit('bigScreen/changeActiveItemConfig', { ...this.config, setting: newArr })
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.init()
+    const groupNameList = []
+    this.config.setting.filter(
+      (item) => item.tabName === 'custom'
+    ).forEach(item => {
+      if (item.tabName === 'custom' && item.groupName) {
+        if (!groupNameList.includes(item.groupName)) {
+          groupNameList.push(item.groupName)
+          this.groupList.push({
+            groupName: item.groupName,
+            list: [item]
+          })
+        } else {
+          this.groupList.find(group => group.groupName === item.groupName).list.push(item)
+        }
+      } else {
+        if (this.groupList.find(group => group.groupName === 'other')) {
+          this.groupList.find(group => group.groupName === 'other').list.push(item)
+        } else {
+          this.groupList.push({
+            groupName: 'other',
+            list: [item]
+          })
+        }
+      }
+    })
+    for (let i = 0; i < this.groupList.length; i++) {
+      if (this.groupList[i].groupName === 'other') {
+        const otherObject = this.groupList.splice(i, 1)[0]
+        this.groupList.push(otherObject)
+        break
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.config = this.$store.state.bigScreen.activeItemConfig
+    }
+  }
+}
+</script>
+ <style lang="scss" scoped>
+ @import '../../assets/style/settingWrap.scss';
+ @import '../../assets/style/bsTheme.scss';
+ // 筛选条件的按钮样式
+ .add-filter-box {
+   position: relative;
+   .add-filter {
+     margin-left: 90px;
+     margin-bottom: 10px;
+   }
+   .add-filter-btn {
+     position: absolute;
+     top: 0;
+   }
+ }
+ .lc-field-body {
+   padding:12px 16px;
+ }
+ .el-form-item{
+   margin-bottom: 6px !important;
+ }
+ .lc-field-title {
+   position: relative;
+   padding-left: 12px;
+   line-height: 30px;
+   height: 30px;
+   margin-bottom: 12px;
+   &:after {
+     position: absolute;
+     left: 0;
+     top: 50%;
+     transform: translateY(-50%);
+     content: '';
+     width: 4px;
+     height: 14px;
+     background-color: var(--bs-el-color-primary);
+   }
+ }
+ ::v-deep .el-color-picker__trigger {
+   border-color: var(--bs-el-border);
+ }
+ .color-picker-box{
+   ::v-deep .el-color-picker__trigger {
+     width: 27px!important;
+   }
+ }
+ </style>

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

@@ -0,0 +1,74 @@
+<!--
+ * @description: 旋转的角度
+-->
+
+<template>
+  <div>
+    <el-form-item
+      :label-width="labelWidth"
+      label="绕x轴旋转角度"
+    >
+      <el-input-number
+        v-model="config.rotateX"
+        class="bs-el-input-number"
+        :min="0"
+        :max="360"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="绕y轴旋转角度"
+    >
+      <el-input-number
+        v-model="config.rotateY"
+        class="bs-el-input-number"
+        :min="0"
+        :max="360"
+        :step="1"
+      />
+    </el-form-item> <el-form-item
+      :label-width="labelWidth"
+      label="绕z轴旋转角度"
+    >
+      <el-input-number
+        v-model="config.rotateZ"
+        class="bs-el-input-number"
+        :min="0"
+        :max="360"
+        :step="1"
+      />
+    </el-form-item>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({
+        rotateX: 0,
+        rotateY: 0,
+        rotateZ: 0
+      })
+    },
+    labelWidth: {
+      type: String,
+      default: '120px'
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  mounted () {},
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -56,6 +56,7 @@ import { resolveComponentType } from 'data-room-ui/js/utils'
 import DataSetting from './DataSetting.vue'
 import rightSetting from 'data-room-ui/js/utils/rightSettingImport'
 import CustomComponent from './G2CustomSetting.vue'
+import EchartsCustomSetting from './EchartsCustomSetting.vue'
 import Svgs from 'data-room-ui/Svgs/setting.vue'
 import { mapState, mapMutations } from 'vuex'
 // import _ from 'lodash'
@@ -78,7 +79,7 @@ export default {
     Svgs,
     // 远程组件的样式配置也和g2Plot的样式配置一样，采用属性配置, 故使用一个组件
     RemoteComponent: CustomComponent,
-    EchartsComponent: CustomComponent
+    EchartsComponent: EchartsCustomSetting
   },
   data () {
     return {
@@ -114,6 +115,9 @@ export default {
         x: this.config?.x,
         y: this.config?.y,
         z: this.config?.z,
+        rotateX: this.config?.rotateX,
+        rotateY: this.config?.rotateY,
+        rotateZ: this.config?.rotateZ,
         setting: cloneDeep(this.config?.setting),
         customize: cloneDeep(this.config?.customize),
         url: this.config?.url,

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

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

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

@@ -71,6 +71,42 @@ export default {
           this.changeStyle(this.config, true)
         }
       }
+    },
+    'config.rotateX': {
+      deep: true,
+      handler (val) {
+        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 dom2 = document.querySelector('.render-item-wrap')
+        dom1.setAttribute('style', 'perspective: 500px;')
+        dom2.setAttribute('style', 'perspective: 500px;')
+        dom1.setAttribute('style', 'transform:' + rotate)
+        dom2.setAttribute('style', 'transform:' + rotate)
+      }
+    },
+    'config.rotateY': {
+      deep: true,
+      handler (val) {
+        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 dom2 = document.querySelector('.render-item-wrap')
+        dom1.setAttribute('style', 'perspective: 500px;')
+        dom2.setAttribute('style', 'perspective: 500px;')
+        dom1.setAttribute('style', 'transform:' + rotate)
+        dom2.setAttribute('style', 'transform:' + rotate)
+      }
+    },
+    'config.rotateZ': {
+      deep: true,
+      handler (val) {
+        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 dom2 = document.querySelector('.render-item-wrap')
+        dom1.setAttribute('style', 'perspective: 500px;')
+        dom2.setAttribute('style', 'perspective: 500px;')
+        dom1.setAttribute('style', 'transform:' + rotate)
+        dom2.setAttribute('style', 'transform:' + rotate)
+      }
     }
   },
   mounted () {
@@ -410,8 +446,8 @@ export default {
     seriesStyle (config) {
       const _config = CloneDeep(config)
       const seriesCustom = _config.option.seriesCustom
-      // const ids = ['barTopColor', 'barColor', 'barBottomColor', 'shadowColor', 'shadowTopColor']
       const ids = Object.keys(config.option.seriesCustom)
+      // 判断是否是分组柱状图
       const isGroup = _config.option.series.length !== 5
       // 宽度配置
       _config.option.series.forEach(item => {