初始化

frontend/packages/Decorations/Decoration1/decoration1.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-1 style="width:90px;height:50px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration1 from '@jiaminghi/data-view/lib/components/decoration1/src/main.vue'
+export default {
+  name: 'Decoration1',
+  components: {
+    DvDecoration1
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration1/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-1
+      :key="updateKey"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration1 from '@jiaminghi/data-view/lib/components/decoration1/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration1',
+  components: {
+    DvDecoration1
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration1/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration1/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration1',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#fff',
+    decorationColor2: '#0de7c2',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration10/decoration10.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-10 style="width:90%;height:5px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration10 from '@jiaminghi/data-view/lib/components/decoration10/src/main.vue'
+export default {
+  name: 'Decoration10',
+  components: {
+    DvDecoration10
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration10/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-10
+      :key="updateKey"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration10 from '@jiaminghi/data-view/lib/components/decoration10/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration10',
+  components: {
+    DvDecoration10
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration10/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration10/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration10',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#00c2ff',
+    decorationColor2:'rgba(0, 194, 255, 0.3)' ,
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration11/decoration11.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-11 style="width:100%;height:40px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration11 from '@jiaminghi/data-view/lib/components/decoration11/src/main.vue'
+export default {
+  name: 'Decoration11',
+  components: {
+    DvDecoration11
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration11/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-11
+      :key="updateKey"
+      :color="color"
+    >
+      <!-- <span :style="
+        'font-size:' +
+          config.customize.fontSize +
+          'px;color:' +
+          config.customize.color +
+          ';font-weight:' +
+          config.customize.fontWeight
+      ">{{config.customize.title}}</span> -->
+    </dv-decoration-11>
+  </div>
+</template>
+<script>
+import DvDecoration11 from '@jiaminghi/data-view/lib/components/decoration11/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration11',
+  components: {
+    DvDecoration11
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration11/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration11/settingConfig.js

@@ -0,0 +1,47 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration11',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#1a98fc',
+    decorationColor2: '#2cf7fe',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+    // title:'decoration',
+    // fontSize: 20,
+    // fontWeight: 700,
+    // color: '#36474f'
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration12/decoration12.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-12 style="width:70px;height:70px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration12 from '@jiaminghi/data-view/lib/components/decoration12/src/main.vue'
+export default {
+  name: 'Decoration12',
+  components: {
+    DvDecoration12
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration12/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-12
+      :key="updateKey"
+      :scan-dur="config.customize.scanDur"
+      :halo-dur="config.customize.scanDur"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration12 from '@jiaminghi/data-view/lib/components/decoration12/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration12',
+  components: {
+    DvDecoration12
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration12/setting.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="扫描动画时长">
+            <el-input-number
+              v-model="config.customize.scanDur"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+          <el-form-item label="光晕动画时长">
+            <el-input-number
+              v-model="config.customize.haloDur"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration12/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration12',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: null,
+    decorationColor2: null,
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration2/decoration2.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-2 style="width:90px;height:5px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration2 from '@jiaminghi/data-view/lib/components/decoration2/src/main.vue'
+export default {
+  name: 'Decoration2',
+  components: {
+    DvDecoration2
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration2/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-2
+      :key="updateKey"
+      :color="color"
+      :dur="config.customize.dur"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration2 from '@jiaminghi/data-view/lib/components/decoration2/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+
+export default {
+  name: 'Decoration2',
+  components: {
+    DvDecoration2
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration2/setting.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item> -->
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              class="bs-el-input-number"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+// import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration2/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration2',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // // 绕x轴旋转角度
+    // rotateX: 0,
+    // // 绕y轴旋转角度
+    // rotateY: 0,
+    // // 绕z轴旋转角度
+    // rotateZ: 0,
+    // // 透视距离
+    // perspective: 0,
+    // skewX: 0,
+    // skewY: 0
+  },
+  customize: {
+    decorationColor1: '#3faacb',
+    decorationColor2: '#fff',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration2Reverse/decoration2.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="content">
+    <dv-decoration-2
+      :reverse="true"
+      style="width:5px;height:75px;"
+    />
+  </div>
+</template>
+
+<script>
+import DvDecoration2 from '@jiaminghi/data-view/lib/components/decoration2/src/main.vue'
+
+export default {
+  name: 'Decoration2',
+  components: {
+    DvDecoration2
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration2Reverse/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-2
+      :key="updateKey"
+      :reverse="true"
+      :color="color"
+      :dur="config.customize.dur"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration2 from '@jiaminghi/data-view/lib/components/decoration2/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration2',
+  components: {
+    DvDecoration2
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration2Reverse/setting.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <!-- <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item> -->
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              class="bs-el-input-number"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration2Reverse/settingConfig.js

@@ -0,0 +1,41 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration2Reverse',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0
+  },
+  customize: {
+    decorationColor1: '#3faacb',
+    decorationColor2: null,
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration3/decoration3.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-3 style="width:90px;height:20px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration3 from '@jiaminghi/data-view/lib/components/decoration3/src/main.vue'
+export default {
+  name: 'Decoration3',
+  components: {
+    DvDecoration3
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration3/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-3
+      :key="updateKey"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration3 from '@jiaminghi/data-view/lib/components/decoration3/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration3',
+  components: {
+    DvDecoration3
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration3/setting.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration3/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration3',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#7acaec',
+    decorationColor2: '#000',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration4/decoration4.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-4 style="width:7px;height:70px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration4 from '@jiaminghi/data-view/lib/components/decoration4/src/main.vue'
+export default {
+  name: 'Decoration4',
+  components: {
+    DvDecoration4
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration4/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-4
+      :key="updateKey"
+      :reverse="config.customize.reverse"
+      :color="color"
+      :dur="config.customize.dur"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration4 from '@jiaminghi/data-view/lib/components/decoration4/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration4',
+  components: {
+    DvDecoration4
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration4/setting.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              class="bs-el-input-number"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration4/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration4',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: 'rgba(255, 255, 255, 0.3)',
+    decorationColor2: 'rgba(255, 255, 255, 0.3)',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration4Reverse/decoration4.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="content">
+    <dv-decoration-4
+      :reverse="true"
+      style="width:90px;height:5px;"
+    />
+  </div>
+</template>
+
+<script>
+import DvDecoration4 from '@jiaminghi/data-view/lib/components/decoration4/src/main.vue'
+export default {
+  name: 'Decoration4',
+  components: {
+    DvDecoration4
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration4Reverse/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-4
+      :key="updateKey"
+      :reverse="true"
+      :color="color"
+      :dur="config.customize.dur"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration4 from '@jiaminghi/data-view/lib/components/decoration4/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration4',
+  components: {
+    DvDecoration4
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration4Reverse/setting.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item label="装饰名称" class="lc-field-body">
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              class="bs-el-input-number"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration4Reverse/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration4Reverse',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: 'rgba(255, 255, 255, 0.3)',
+    decorationColor2: 'rgba(255, 255, 255, 0.3)',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration5/decoration5.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="content">
+    <dv-decoration-5 style="width:90px;height:40px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration5 from '@jiaminghi/data-view/lib/components/decoration5/src/main.vue'
+export default {
+  name: 'Decoration5',
+  components: {
+    DvDecoration5
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ .content{
+   width:221px;
+   height:100px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+ }
+</style>

frontend/packages/Decorations/Decoration5/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-5
+      :key="updateKey"
+      :color="color"
+      :dur="config.customize.dur"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration5 from '@jiaminghi/data-view/lib/components/decoration5/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration5',
+  components: {
+    DvDecoration5
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration5/setting.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      class="setting-body bs-el-form"
+      label-position="left"
+      label-width="90px"
+    >
+      <el-form
+        :model="config.customize"
+        class="setting-body bs-el-form"
+        label-position="left"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          class="lc-field-body"
+          label="装饰名称"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              :precision="0"
+              class="bs-el-input-number"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    SettingTitle,
+    RotateSetting
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration5/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration5',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#3f96a5',
+    decorationColor2: '#3f96a5',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration6/decoration6.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-6 style="width:90px;height:30px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration6 from '@jiaminghi/data-view/lib/components/decoration6/src/main.vue'
+export default {
+  name: 'Decoration6',
+  components: {
+    DvDecoration6
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration6/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-6
+      :key="updateKey"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration6 from '@jiaminghi/data-view/lib/components/decoration6/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration6',
+  components: {
+    DvDecoration6
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration6/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration6/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration6',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1:'#7acaec',
+    decorationColor2: '#7acaec',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration8/decoration8.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-8 style="width:90px;height:50px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration8 from '@jiaminghi/data-view/lib/components/decoration8/src/main.vue'
+export default {
+  name: 'Decoration8',
+  components: {
+    DvDecoration8
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration8/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-8
+      :key="updateKey"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration8 from '@jiaminghi/data-view/lib/components/decoration8/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration8',
+  components: {
+    DvDecoration8
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration8/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration8/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration8',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#3f96a5',
+    decorationColor2: '#3f96a5',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration8Reverse/decoration8.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="content">
+    <dv-decoration-8
+      :reverse="true"
+      style="width:90px;height:50px;"
+    />
+  </div>
+</template>
+
+<script>
+import DvDecoration8 from '@jiaminghi/data-view/lib/components/decoration8/src/main.vue'
+export default {
+  name: 'Decoration8',
+  components: {
+    DvDecoration8
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration8Reverse/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-8
+      :key="updateKey"
+      :reverse="true"
+      :color="color"
+    />
+  </div>
+</template>
+<script>
+import DvDecoration8 from '@jiaminghi/data-view/lib/components/decoration8/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration8',
+  components: {
+    DvDecoration8
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration8Reverse/setting.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration8Reverse/settingConfig.js

@@ -0,0 +1,43 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration8Reverse',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: '#3f96a5',
+    decorationColor2: '#3f96a5',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Decorations/Decoration9/decoration9.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content">
+    <dv-decoration-9 style="width:70px;height:70px;" />
+  </div>
+</template>
+
+<script>
+import DvDecoration9 from '@jiaminghi/data-view/lib/components/decoration9/src/main.vue'
+export default {
+  name: 'Decoration9',
+  components: {
+    DvDecoration9
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 221px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

frontend/packages/Decorations/Decoration9/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-decoration-9
+      :key="updateKey"
+      :color="color"
+      :dur="config.customize.dur"
+    >
+      <!-- <span :style="
+        'font-size:' +
+          config.customize.fontSize +
+          'px;color:' +
+          config.customize.color +
+          ';font-weight:' +
+          config.customize.fontWeight
+      ">{{config.customize.title}}</span> -->
+    </dv-decoration-9>
+  </div>
+</template>
+<script>
+import DvDecoration9 from '@jiaminghi/data-view/lib/components/decoration9/src/main.vue'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Decoration9',
+  components: {
+    DvDecoration9
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.decorationColor1 ||
+        this.config.customize.decorationColor2
+        ? [
+            this.config.customize.decorationColor1,
+            this.config.customize.decorationColor2
+          ]
+        : null
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.title-box {
+  height: 40px;
+  padding: 10px 10px 0 0;
+  box-sizing: border-box;
+  .title {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
+    border-left: 3px solid var(--bs-el-color-primary);
+    padding-left: 16px;
+  }
+  .target-value {
+    overflow-y: auto;
+    height: 60px;
+    font-weight: bold;
+    width: 100%;
+    font-size: 20px;
+    color: #333;
+    padding: 16px 0 0 22px;
+    box-sizing: border-box;
+  }
+}
+.el-icon-warning {
+  color: #ffd600;
+}
+.title-hover {
+  &:hover {
+    cursor: move;
+  }
+}
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/Decorations/Decoration9/setting.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <el-form
+        :model="config.customize"
+        label-position="left"
+        class="setting-body bs-el-form"
+        label-width="90px"
+      >
+        <SettingTitle>标题</SettingTitle>
+        <el-form-item
+          label="装饰名称"
+          class="lc-field-body"
+        >
+          <el-input
+            v-model="config.title"
+            clearable
+          />
+        </el-form-item>
+        <SettingTitle>位置</SettingTitle>
+        <div class="lc-field-body">
+          <PosWhSetting :config="config" />
+        </div>
+         <SettingTitle>旋转</SettingTitle>
+        <div class="lc-field-body">
+          <RotateSetting
+            :config="config"
+          />
+        </div>
+        <SettingTitle>基础</SettingTitle>
+        <div class="lc-field-body">
+          <el-form-item label="装饰主颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor1"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="装饰副颜色">
+            <ColorPicker
+              v-model="config.customize.decorationColor2"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="单次动画时长">
+            <el-input-number
+              v-model="config.customize.dur"
+              class="bs-el-input-number"
+              :precision="0"
+              label="请输入时长(s)"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-form>
+  </div>
+</template>
+<script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'BarSetting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  data () {
+    return {
+      // 预设主题色
+      predefineThemeColors: predefineColors
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/borderAndDecoraSetting.scss";
+.lc-field-body {
+  padding: 12px 16px;
+}
+</style>

frontend/packages/Decorations/Decoration9/settingConfig.js

@@ -0,0 +1,47 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'decoration9',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    decorationColor1: 'rgba(3, 166, 224, 0.8)',
+    decorationColor2: 'rgba(3, 166, 224, 0.5)',
+    reverse: false,
+    dur: 3,
+    scanDur: 3,
+    haloDur: 2
+    // title:'66%',
+    // fontSize: 20,
+    // fontWeight: 700,
+    // color: '#36474f'
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}