初始化

frontend/packages/Borders/Border1/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-1
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox1 from '@jiaminghi/data-view/lib/components/borderBox1/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox1/src/main.css'
+export default {
+  name: 'Border1',
+  components: {
+    DvBorderBox1
+  },
+  mixins: [dataVMixins],
+  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 #007aff;
+    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/Borders/Border1/setting.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+    <!-- <RotateSetting
+      :config="config"
+    /> -->
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border1Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border1/settingConfig.js

@@ -0,0 +1,53 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border1',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    borderMainColor: '#83bff6',
+    borderSecondaryColor: '#00CED1',
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border10/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-10
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox10 from '@jiaminghi/data-view/lib/components/borderBox10/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox10/src/main.css'
+
+export default {
+  name: 'Border10',
+  components: {
+    DvBorderBox10
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border10/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border10Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border10/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border10',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border11/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-11
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+      :title="title"
+      :title-width="titleWidth"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox11 from '@jiaminghi/data-view/lib/components/borderBox11/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox11/src/main.css'
+export default {
+  name: 'Border11',
+  components: {
+    DvBorderBox11
+  },
+  mixins: [dataVMixins],
+  computed: {
+    title () {
+      return this.config.customize.title
+    },
+    titleWidth () {
+      return this.config.customize.titleWidth
+    }
+  },
+  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/Borders/Border11/setting.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    >
+      <template slot="top">
+        <el-form-item label="边框标题">
+          <el-input
+            v-model="config.customize.title"
+            maxlength="100"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="标题宽度">
+          <el-input-number
+            class="bs-el-input-number"
+            v-model="config.customize.titleWidth"
+            :max="8000"
+            :min="50"
+            :step="10"
+          />
+        </el-form-item>
+      </template>
+    </BorderSetting>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border11Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border11/settingConfig.js

@@ -0,0 +1,60 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border11',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    // 标题
+    title: '',
+    // 标题宽度
+    titleWidth: 250,
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border12/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-12
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox12 from '@jiaminghi/data-view/lib/components/borderBox12/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox12/src/main.css'
+export default {
+  name: 'Border12',
+  components: {
+    DvBorderBox12
+  },
+  mixins: [dataVMixins],
+  computed: {
+    color () {
+      return this.config.customize.borderMainColor ||
+        this.config.customize.borderSecondaryColor
+        ? [
+            this.config.customize.borderMainColor,
+            this.config.customize.borderSecondaryColor
+          ]
+        : null
+    },
+    backgroundColor () {
+      return this.config.customize.backgroundColor
+        ? this.config.customize.backgroundColor
+        : 'transparent'
+    }
+  },
+  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/Borders/Border12/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border12Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border12/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border12',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border13/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-13
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox13 from '@jiaminghi/data-view/lib/components/borderBox13/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox13/src/main.css'
+
+export default {
+  name: 'Border13',
+  components: {
+    DvBorderBox13
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border13/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border13Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border13/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border13',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border14/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    style="width: 100%; height: 100%"
+    class="bs-design-wrap"
+  >
+    <div
+      :key="updateKey"
+      class="custom-border-box"
+      :style="{
+        'border-top-left-radius': radiusLeftTop + 'px',
+        'border-top-right-radius': radiusRightTop + 'px',
+        'border-bottom-left-radius': radiusLeftBottom + 'px',
+        'border-bottom-right-radius': radiusRightBottom + 'px',
+        border: `${width}px solid ${color} `,
+        opacity: opacity / 100,
+        'background-image': `linear-gradient(${gradientDirection}, ${
+          gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})`
+      }"
+    />
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Border14',
+  components: {},
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    color () {
+      return this.config.customize.borderColor || ''
+    },
+    width () {
+      return this.config.customize.borderWidth || 0
+    },
+    gradientColor0 () {
+      return this.config.customize.gradientColor0 || ''
+    },
+    gradientColor1 () {
+      return this.config.customize.gradientColor1 || ''
+    },
+    radiusLeftTop () {
+      return this.config.customize.radiusLeftTop || 0
+    },
+    radiusRightTop () {
+      return this.config.customize.radiusRightTop || 0
+    },
+    radiusLeftBottom () {
+      return this.config.customize.radiusLeftBottom || 0
+    },
+    radiusRightBottom () {
+      return this.config.customize.radiusRightBottom || 0
+    },
+    gradientDirection () {
+      return this.config.customize.gradientDirection
+    },
+    opacity () {
+      return (this.config.customize.opacity === 0 || this.config.customize.opacity) ? this.config.customize.opacity : 100
+    }
+  },
+  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;
+
+  .custom-border-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/*滚动条样式*/
+::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/Borders/Border14/setting.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <slot name="top" />
+      <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.borderColor"
+              placeholder="请选择边框线颜色"
+              :predefine-colors="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="边框线宽度">
+            <el-input-number
+              v-model="config.customize.borderWidth"
+              class="bs-el-input-number"
+            />
+          </el-form-item>
+          <el-form-item label="背景色一">
+            <ColorPicker
+              v-model="config.customize.gradientColor0"
+              placeholder="请选择背景色"
+              :predefine-colors="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="背景色二">
+            <ColorPicker
+              v-model="config.customize.gradientColor1"
+              placeholder="请选择背景色"
+              :predefine-colors="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="渐变色方向">
+            <el-select
+              v-model="config.customize.gradientDirection"
+              popper-class="bs-el-select"
+              class="bs-el-select"
+            >
+              <el-option
+                v-for="item in gradientDirection"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="不透明度"
+          >
+            <el-input-number
+              v-model="config.customize.opacity"
+              class="bs-el-input-number"
+              :min="0"
+              :max="100"
+              :step="1"
+            />
+          </el-form-item>
+          <el-form-item label="左上圆角值">
+            <el-input-number
+              v-model="config.customize.radiusLeftTop"
+              class="bs-el-input-number"
+            />
+          </el-form-item>
+          <el-form-item label="左下圆角值">
+            <el-input-number
+              v-model="config.customize.radiusLeftBottom"
+              class="bs-el-input-number"
+            />
+          </el-form-item>
+          <el-form-item label="右上圆角值">
+            <el-input-number
+              v-model="config.customize.radiusRightTop"
+              class="bs-el-input-number"
+            />
+          </el-form-item>
+          <el-form-item label="右下圆角值">
+            <el-input-number
+              v-model="config.customize.radiusRightBottom"
+              class="bs-el-input-number"
+            />
+          </el-form-item>
+          <slot name="bottom" />
+        </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 { predefineColors } from 'data-room-ui/js/utils/colorList'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+export default {
+  name: 'Border14Setting',
+  components: {
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting,
+    SettingTitle
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => predefineColors
+    }
+  },
+  data () {
+    return {
+      gradientDirection: [
+        {
+          label: '从左到右',
+          value: 'to right'
+        },
+        {
+          label: '从右到左',
+          value: 'to left'
+        },
+        {
+          label: '从上到下',
+          value: 'to bottom'
+        },
+        {
+          label: '从下到上',
+          value: 'to top'
+        },
+        {
+          label: '从左上到右下',
+          value: 'to bottom right'
+        },
+        {
+          label: '从右上到左下',
+          value: 'to bottom left'
+        },
+        {
+          label: '从左下到右上',
+          value: 'to top right'
+        },
+        {
+          label: '从右下到左上',
+          value: 'to top left'
+        }
+      ]
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.lc-field-body {
+  padding: 16px;
+}
+</style>

frontend/packages/Borders/Border14/settingConfig.js

@@ -0,0 +1,54 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border14',
+  root: {
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框线颜色
+    borderColor: '#87888e',
+    // 边框线宽度
+    borderWidth: 2,
+    // 边框背景颜色
+    backgroundColor: '#232832',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '',
+    // 渐变色1值
+    gradientColor1: '',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 左上圆角
+    radiusLeftTop: 14,
+    // 右上圆角
+    radiusRightTop: 14,
+    // 左下圆角
+    radiusLeftBottom: 14,
+    // 右下圆角
+    radiusRightBottom: 14
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border15/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    style="width: 100%; height: 100%"
+    class="bs-design-wrap"
+  >
+    <div
+      :key="updateKey"
+      class="custom-border-box"
+      :style="{
+        'border-color': color,
+        'border-width': width + 'px',
+        'background-image': `linear-gradient(${gradientDirection}, ${
+          gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})`,
+        'font-size': fontSize + 'px',
+        'font-weight': fontWeight,
+        opacity: opacity === 0 ? 0 : opacity / 100 ,
+        color: fontColor
+      }"
+    >
+      <span>
+        {{ text }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Border15',
+  components: {},
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    text () {
+      return this.config.customize.text || ''
+    },
+    fontWeight () {
+      return this.config.customize.fontWeight || 400
+    },
+    color () {
+      return this.config.customize.borderColor || '#83bff6'
+    },
+    width () {
+      return this.config.customize.borderWidth || 1
+    },
+    gradientColor0 () {
+      return this.config.customize.gradientColor0 || ''
+    },
+    gradientColor1 () {
+      return this.config.customize.gradientColor1 || ''
+    },
+    gradientDirection () {
+      return this.config.customize.gradientDirection
+    },
+    fontSize () {
+      return this.config.customize.fontSize || 16
+    },
+    fontColor () {
+      return this.config.customize.fontColor || '#fff'
+    },
+    opacity () {
+      return (this.config.customize.opacity === 0 || this.config.customize.opacity) ? this.config.customize.opacity : 100
+    }
+  },
+  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;
+
+  .custom-border-box {
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(131, 191, 246, 0);
+    border-radius: 50% 50% 50% 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+/*滚动条样式*/
+::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/Borders/Border15/setting.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="bs-setting-wrap">
+    <el-form
+      ref="form"
+      :model="config"
+      label-width="90px"
+      label-position="left"
+      class="setting-body bs-el-form"
+    >
+      <slot name="top" />
+      <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>
+      </el-form>
+      <SettingTitle>基础</SettingTitle>
+      <div class="lc-field-body">
+        <el-form-item label="文本">
+          <el-input
+            v-model="config.customize.text"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="边框线颜色">
+          <ColorPicker
+            v-model="config.customize.borderColor"
+            placeholder="请选择边框线颜色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="背景色一">
+          <ColorPicker
+            v-model="config.customize.gradientColor0"
+            placeholder="请选择背景色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="背景色二">
+          <ColorPicker
+            v-model="config.customize.gradientColor1"
+            placeholder="请选择背景色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="渐变色方向">
+          <el-select
+            v-model="config.customize.gradientDirection"
+            popper-class="bs-el-select"
+            class="bs-el-select"
+          >
+            <el-option
+              v-for="item in gradientDirection"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字体颜色">
+          <ColorPicker
+            v-model="config.customize.fontColor"
+            placeholder="请选择背景色"
+            :predefine-colors="predefineThemeColors"
+          />
+        </el-form-item>
+        <el-form-item label="边框线宽度">
+          <el-input-number
+            v-model="config.customize.borderWidth"
+            class="bs-el-input-number"
+          />
+        </el-form-item>
+        <el-form-item label="字体大小">
+          <el-input-number
+            v-model="config.customize.fontSize"
+            class="bs-el-input-number"
+            :min="12"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item label="字体粗度">
+          <el-input-number
+            v-model="config.customize.fontWeight"
+            class="bs-el-input-number"
+            :min="400"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item label="不透明度">
+          <el-input-number
+            v-model="config.customize.opacity"
+            class="bs-el-input-number"
+            :min="0"
+            :max="100"
+            :step="1"
+          />
+        </el-form-item>
+      </div>
+    </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 { predefineColors } from 'data-room-ui/js/utils/colorList'
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+export default {
+  name: 'Border14Setting',
+  components: {
+    SettingTitle,
+    ColorPicker,
+    PosWhSetting,
+    RotateSetting
+  },
+  props: {
+    config: {
+      type: Object,
+      required: true
+    },
+    predefineThemeColors: {
+      type: Array,
+      default: () => predefineColors
+    }
+  },
+  data () {
+    return {
+      gradientDirection: [
+        {
+          label: '从左到右',
+          value: 'to right'
+        },
+        {
+          label: '从右到左',
+          value: 'to left'
+        },
+        {
+          label: '从上到下',
+          value: 'to bottom'
+        },
+        {
+          label: '从下到上',
+          value: 'to top'
+        },
+        {
+          label: '从左上到右下',
+          value: 'to bottom right'
+        },
+        {
+          label: '从右上到左下',
+          value: 'to bottom left'
+        },
+        {
+          label: '从左下到右上',
+          value: 'to top right'
+        },
+        {
+          label: '从右下到左上',
+          value: 'to top left'
+        }
+      ]
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.lc-field-body {
+  padding: 16px;
+}
+</style>

frontend/packages/Borders/Border15/settingConfig.js

@@ -0,0 +1,54 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border15',
+  root: {
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框线颜色
+    borderColor: '#87888e',
+    // 边框线宽度
+    borderWidth: 2,
+    // 边框背景颜色
+    backgroundColor: '#232832',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '',
+    // 渐变色1值
+    gradientColor1: '',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 字体大小
+    fontSize: 40,
+    // 字体颜色
+    fontColor: '#fff',
+    // 字体粗细
+    fontWeight: 500,
+    // 中心文本
+    text: ''
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border2/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-2
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox2 from '@jiaminghi/data-view/lib/components/borderBox2/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox2/src/main.css'
+export default {
+  name: 'Border2',
+  components: {
+    DvBorderBox2
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border2/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border2Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border2/settingConfig.js

@@ -0,0 +1,53 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border2',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    borderMainColor: '#83bff6',
+    borderSecondaryColor: '#00CED1',
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border3/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-3
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox3 from '@jiaminghi/data-view/lib/components/borderBox3/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox3/src/main.css'
+export default {
+  name: 'Border3',
+  components: {
+    DvBorderBox3
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border3/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border3Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border3/settingConfig.js

@@ -0,0 +1,53 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border3',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    borderMainColor: '#83bff6',
+    borderSecondaryColor: '#00CED1',
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border4/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-4
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+      :reverse="reverse"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox4 from '@jiaminghi/data-view/lib/components/borderBox4/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox4/src/main.css'
+export default {
+  name: 'Border4',
+  components: {
+    DvBorderBox4
+  },
+  mixins: [dataVMixins],
+  computed: {
+    reverse () {
+      return this.config.customize.reverse
+    }
+  },
+  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/Borders/Border4/setting.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    >
+      <template slot="bottom">
+        <el-form-item label="翻转形态">
+          <el-switch
+            v-model="config.customize.reverse"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+      </template>
+    </BorderSetting>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border4Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border4/settingConfig.js

@@ -0,0 +1,58 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border4',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 边框是否翻转
+    reverse: false
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border5/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-5
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+      :reverse="reverse"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox5 from '@jiaminghi/data-view/lib/components/borderBox5/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox5/src/main.css'
+export default {
+  name: 'Border5',
+  components: {
+    DvBorderBox5
+  },
+  mixins: [dataVMixins],
+  computed: {
+    reverse () {
+      return this.config.customize.reverse
+    }
+  },
+  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/Borders/Border5/setting.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    >
+      <template slot="bottom">
+        <el-form-item label="翻转形态">
+          <el-switch
+            v-model="config.customize.reverse"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+      </template>
+    </BorderSetting>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border5Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border5/settingConfig.js

@@ -0,0 +1,58 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border5',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 边框是否翻转
+    reverse: false
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border6/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-6
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox6 from '@jiaminghi/data-view/lib/components/borderBox6/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox6/src/main.css'
+export default {
+  name: 'Border6',
+  components: {
+    DvBorderBox6
+  },
+  mixins: [dataVMixins],
+  computed: {
+    color () {
+      return this.config.customize.borderMainColor ||
+        this.config.customize.borderSecondaryColor
+        ? [
+            this.config.customize.borderMainColor,
+            this.config.customize.borderSecondaryColor
+          ]
+        : null
+    },
+    backgroundColor () {
+      return this.config.customize.backgroundColor
+        ? this.config.customize.backgroundColor
+        : 'transparent'
+    }
+  },
+  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/Borders/Border6/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border6Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border6/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border6',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 边框背景颜色
+    backgroundColor: ''
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border7/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-7
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
+export default {
+  name: 'Border7',
+  components: {
+    DvBorderBox7
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border7/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border7Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border7/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border7',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border8/BorderBox8.vue

@@ -0,0 +1,20 @@
+<template>
+  <dv-border-box-8
+    :dur="0"
+    :color="['#83bff6', '#00CED1']"
+    background-color="transparent"
+  />
+</template>
+
+<script>
+import DvBorderBox8 from '@jiaminghi/data-view/lib/components/borderBox8/src/main.vue'
+export default {
+  name: 'BorderBox8',
+  components: {
+    DvBorderBox8
+  },
+  data () {
+    return {}
+  }
+}
+</script>

frontend/packages/Borders/Border8/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-8
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+      :dur="dur"
+      :reverse="reverse"
+    />
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import { borderBox8 } from '@jiaminghi/data-view'
+Vue.use(borderBox8)
+export default {
+  name: 'Border8',
+  mixins: [dataVMixins],
+  computed: {
+    dur () {
+      return this.config.customize.dur
+    },
+    reverse () {
+      return this.config.customize.reverse
+    }
+  },
+  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/Borders/Border8/setting.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    >
+      <template slot="bottom">
+        <el-form-item label="翻转形态">
+          <el-switch
+            v-model="config.customize.reverse"
+            class="bs-el-switch"
+            active-color="#007aff"
+          />
+        </el-form-item>
+        <el-form-item label="单次动画时长">
+          <el-input-number
+            v-model="config.customize.dur"
+            class="bs-el-input-number"
+            :min="0"
+            :max="1000"
+            :step="1"
+          />
+        </el-form-item>
+      </template>
+    </BorderSetting>
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from 'data-room-ui/js/utils/colorList'
+export default {
+  name: 'Border8Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border8/settingConfig.js

@@ -0,0 +1,60 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border8',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    // 边框是否翻转
+    reverse: false,
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100,
+    // 单次动画时长
+    dur: 3
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}

frontend/packages/Borders/Border9/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-9
+      :id="'dataV' + code"
+      :key="updateKey"
+      :color="color"
+      :background-color="colorType === 'single' ? backgroundColor : `url(#${borderBgId})`"
+    />
+  </div>
+</template>
+<script>
+import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
+import DvBorderBox9 from '@jiaminghi/data-view/lib/components/borderBox9/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox9/src/main.css'
+
+export default {
+  name: 'Border9',
+  components: {
+    DvBorderBox9
+  },
+  mixins: [dataVMixins],
+  computed: {},
+  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/Borders/Border9/setting.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <BorderSetting
+      ref="form"
+      :config="config"
+      :predefine-theme-colors="predefineThemeColors"
+    />
+  </div>
+</template>
+<script>
+import BorderSetting from 'data-room-ui/BigScreenDesign/BorderSetting.vue'
+import {predefineColors} from "data-room-ui/js/utils/colorList";
+export default {
+  name: 'Border9Setting',
+  components: {
+    BorderSetting
+  },
+  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>

frontend/packages/Borders/Border9/settingConfig.js

@@ -0,0 +1,56 @@
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  padding: [30, 30, 30, 60],
+  legend: false,
+  isGroup: true,
+  data: [],
+  // displayOption: {
+  //   color: '',
+  //   backgroundColor: ''
+  // }
+  // 设置面板属性的显隐
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'border9',
+  root: {
+    version: '2023071001',
+    contribution: false,
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    // 边框主要颜色
+    borderMainColor: '#83bff6',
+    // 边框次要颜色
+    borderSecondaryColor: '#00CED1',
+    // 边框背景颜色
+    backgroundColor: '',
+    colorType: 'single',
+    // 渐变色0值
+    gradientColor0: '#83bff6',
+    // 渐变色1值
+    gradientColor1: '#188df0',
+    // 渐变色色值改变方向
+    gradientDirection: 'to right',
+    // 透明度
+    opacity: 100
+  }
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}