初始化

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)
+}