大屏组件新增选择边框功能

data-room-ui/packages/BasicComponents/ChartTab/index.vue

@@ -146,6 +146,7 @@ export default {
 <style lang="scss" scoped>
 .bs-design-wrap{
   width: 100%;
+  padding: 0 16px;
   .tab-title-box{
     height: 40px;
     display: flex;

data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -103,6 +103,7 @@ export default {
 @import "../../BasicComponents/fonts/index.css";
 .bs-design-wrap{
   width: 100%;
+   padding: 0 16px;
 }
 .time {
   width: 100%;

data-room-ui/packages/BasicComponents/DigitalFlop/index.vue

@@ -130,6 +130,7 @@ export default {
   background-color: rgb(31, 31, 31);
 }
 .bs-design-wrap {
+   padding: 0 16px;
   position: relative;
   width: 100%;
   height: 100%;

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -277,6 +277,7 @@ export default {
   background-color: rgba(0, 0, 0, 0);
 }
 .bs-design-wrap{
+  padding: 0 16px;
   position: relative;
   .button{
     position: absolute;

data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js

@@ -106,6 +106,7 @@ export const FlyMapData = {
   name: '飞线图',
   title: '飞线图',
   icon: Icon.getNameList()[18],
+  border:{type:'',color:''},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/HorizontalLine/index.vue

@@ -57,6 +57,7 @@ export default {
 .bs-design-wrap {
   position: relative;
   display: flex;
+  padding: 0 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;

data-room-ui/packages/BasicComponents/IframeChart/index.vue

@@ -75,6 +75,7 @@ export default {
   position: relative;
   overflow: hidden;
   background: #fff;
+  padding: 0 16px;
   width: 100%;
   height: 100%;
   .iframe-wrap {

data-room-ui/packages/BasicComponents/LinkChart/index.vue

@@ -72,6 +72,7 @@ export default {
 <style lang="scss" scoped>
   .bs-design-wrap{
     width: 100%;
+    padding: 0 16px;
   }
   .content-box{
     text-align: center;

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -304,6 +304,7 @@ export default {
 }
 .bs-design-wrap{
   position: relative;
+  padding: 0 16px;
   .button{
     position: absolute;
     z-index: 999;

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -95,6 +95,7 @@ export const mapData = {
   name: '地图',
   title: '地图',
   icon: Icon.getNameList()[5],
+  border:{type:''},
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
   w: 800,

data-room-ui/packages/BasicComponents/Picture/index.vue

@@ -51,6 +51,7 @@ export default {
 
 <style lang="scss" scoped>
 .bs-design-wrap {
+  padding: 0 16px;
   width: 100%;
   background-color: rgba(0, 0, 0, 0);
   .content-box {

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -129,6 +129,7 @@ export default {
 }
   .bs-design-wrap{
     position: relative;
+    padding: 0 16px;
     width: 100%;
     height: 100%;
     background-color: transparent;

data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue

@@ -83,6 +83,7 @@ export default {
 }
   .bs-design-wrap{
     position: relative;
+    padding: 0 16px;
     width: 100%;
     height: 100%;
     background-color: transparent;

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -299,6 +299,7 @@ export default {
 .bs-design-wrap {
   position: relative;
   width: 100%;
+  padding: 0 16px;
   height: 100%;
   background-color: transparent;
   border-radius: 4px;

data-room-ui/packages/BasicComponents/Tables/setting.vue

@@ -18,6 +18,23 @@
           clearable
         />
       </el-form-item>
+      <el-form-item
+        class="lc-field-body"
+        label="边框"
+        v-if="config.border"
+      >
+        <el-button
+          size="small"
+          type="primary"
+          @click="init"
+        >
+          选择边框
+        </el-button>
+        <BorderSelect
+          v-model="config.border.type"
+          ref="BorderSelect"
+         />
+      </el-form-item>
       <SettingTitle>位置</SettingTitle>
       <div class="lc-field-body">
         <PosWhSetting
@@ -93,6 +110,7 @@
   </div>
 </template>
 <script>
+import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
@@ -101,7 +119,8 @@ export default {
   components: {
     ColorPicker,
     PosWhSetting,
-    SettingTitle
+    SettingTitle,
+    BorderSelect
   },
   mixins: [chartSettingMixins],
   data () {
@@ -134,7 +153,11 @@ export default {
   },
   watch: {},
   mounted () { },
-  methods: {}
+  methods: {
+    init(){
+      this.$refs.BorderSelect.init()
+    }
+  }
 }
 </script>
 

data-room-ui/packages/BasicComponents/Texts/index.vue

@@ -50,6 +50,7 @@ export default {
 <style lang="scss" scoped>
   .bs-design-wrap{
     width: 100%;
+    padding: 0 16px;
   }
   .content-box{
     text-align: center;

data-room-ui/packages/BasicComponents/ThemeSelect/index.vue

@@ -99,6 +99,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0 16px;
 }
 .content-box{
   text-align: center;

data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue

@@ -102,6 +102,7 @@ export default {
 <style lang="scss" scoped>
 .bs-design-wrap{
   width: 100%;
+  padding: 0 16px;
 }
 .content-box{
   text-align: center;

data-room-ui/packages/BasicComponents/TimeCountDown/index.vue

@@ -163,6 +163,7 @@ export default {
 @import "../../BasicComponents/fonts/index.css";
 .bs-design-wrap{
   width: 100%;
+  padding: 0 16px;
 }
 .time {
   height: 100%;

data-room-ui/packages/BasicComponents/VerticalLine/index.vue

@@ -58,6 +58,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
   justify-content: center;

data-room-ui/packages/BasicComponents/Video/index.vue

@@ -93,6 +93,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  padding: 0 16px;
   background-color: transparent;
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

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

@@ -106,6 +106,7 @@ export default {
       return {
         showTitle: this.config.showTitle,
         title: cloneDeep(this.config?.title),
+        border: cloneDeep(this.config?.border),
         w: this.config?.w,
         h: this.config?.h,
         x: this.config?.x,

data-room-ui/packages/BorderComponents/BorderComponent1/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-1
+      :id="'dataV' + config.code"
+    >
+      <!-- <span style="font-size:20px;color:#fff;height:20px">测试标题</span>
+      <div style="height:calc(100% - 40px)">
+        <slot/>
+      </div> -->
+    </dv-border-box-1>
+  </div>
+</template>
+<script>
+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
+  },
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {},
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  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>

data-room-ui/packages/BorderComponents/BorderComponent2/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-2
+      :id="'dataV' + config.code"
+      :key="updateKey"
+    >
+    </dv-border-box-2>
+  </div>
+</template>
+<script>
+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
+  },
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      updateKey: 0
+    }
+  },
+  computed: {
+    Data () {
+      return JSON.parse(JSON.stringify(this.config))
+    }
+  },
+  watch: {
+    Data: {
+      handler (newVal, oldVal) {
+        this.$nextTick(() => {
+          if ((newVal.w !== oldVal.w) || (newVal.h !== oldVal.h)) {
+            this.updateKey = new Date().getTime()
+          }
+        })
+      },
+      deep: true
+    }
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/bordersList.js

@@ -0,0 +1,16 @@
+// 得到边框组件的远程列表
+// import _ from 'lodash'
+
+const files = require.context('../BorderComponents/', true, /index.vue$/)
+const borderComponents = []
+
+files.keys().forEach(key => {
+  const title = key.split('/')[1].replace('.vue', '')
+  const img = require(`../BorderComponents/${title}/component.png`)
+  borderComponents.push({
+    title:title,
+    img
+  })
+})
+// 抛出内置系统组件
+export default borderComponents

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

@@ -0,0 +1,377 @@
+<template>
+  <el-dialog
+    title="边框组件"
+    :visible.sync="dialogVisible"
+    width="80%"
+    :modal="true"
+    :modal-append-to-body="false"
+    :appen-to-body="true"
+    class="bs-dialog-wrap bs-el-dialog"
+    @closed="close"
+  >
+    <div class="content">
+      <div class="big-screen-list-wrap">
+        <div
+          v-if="remoteComponentlist.length !== 0"
+          class="list-wrap bs-scrollbar"
+          :style="{
+            display: remoteComponentsGridComputed ? 'grid' : 'flex',
+            justifyContent: remoteComponentsGridComputed ? 'space-around' : 'flex-start',
+            height: 'calc(100vh - 430px)'
+          }"
+        >
+          <div
+            v-for="component in remoteComponentlist"
+            :key="component.title"
+            class="big-screen-card-wrap"
+            :style="{
+              width: remoteComponentsGridComputed ? 'auto' : '290px'
+            }"
+            @click="chooseComponent(component)"
+          >
+            <div
+              :class="component.title == focus.title ? 'focus' : ''"
+              class="big-screen-card-inner"
+            >
+              <div class="big-screen-card-img">
+                <el-image
+                  :src="component.img"
+                  fit="contain"
+                  style="width: 100%; height: 100%"
+                >
+                  <div
+                    slot="placeholder"
+                    class="image-slot"
+                  >
+                    加载中···
+                  </div>
+                </el-image>
+              </div>
+              <div class="big-screen-bottom">
+                <div
+                  class="left-bigscreen-title"
+                  :title="component.title"
+                >
+                  {{ component.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="empty"
+        >
+          暂无数据
+        </div>
+      </div>
+    </div>
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        class="bs-el-button-default"
+        @click="dialogVisible = false"
+      >
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        @click="confirm"
+      >
+        确定
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { pageMixins } from 'data-room-ui/js/mixins/page'
+import isEmpty from 'lodash/isEmpty'
+import cloneDeep from 'lodash/cloneDeep'
+import borderComponents from 'data-room-ui/BorderComponents/bordersList'
+export default {
+  name: 'ComponentDialog',
+  mixins: [pageMixins],
+   model: {
+    prop: 'type',
+    event: 'select'
+  },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      dialogVisible: false,
+      loading: false,
+      code: '',
+      focus: -1,
+      searchKey: '',
+      remoteComponentlist: [],
+    }
+  },
+  computed: {
+    remoteComponentsGridComputed () {
+      return this.remoteComponentlist.length > 3
+    },
+  },
+  watch: {
+  },
+  mounted () {
+    this.remoteComponentlist = [...borderComponents]
+    console.log(this.remoteComponentlist)
+  },
+  methods: {
+    chooseComponent (component) {
+      this.focus = cloneDeep(component)
+    },
+    close () { },
+    init () {
+      this.dialogVisible = true
+      this.current = 1
+      this.searchKey = ''
+      this.code = ''
+      this.focus = -1
+    },
+    // 点击确定
+    confirm () {
+      this.dialogVisible = false
+      if (isEmpty(this.focus)) return
+      console.log(this.focus.title)
+      this.$emit('select', this.focus.title)
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/style/bsTheme.scss';
+.content{
+  height: calc(100vh - 290px);
+}
+.big-screen-list-wrap {
+  .el-select {
+    display: inline-block !important;
+    position: relative !important;
+    width: auto !important;
+  }
+
+  position: relative;
+  height: 100%;
+  // margin:0 16px;
+  // padding: 16px;
+  margin-bottom: 56px;
+  color: #9ea9b2;
+  background-color: var(--bs-background-2) !important;
+
+  .top-search-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+
+    .el-input {
+      width: 200px;
+      margin-right: 20px;
+
+      ::v-deep.el-input__inner {
+        background-color: var(--bs-background-1) !important;
+      }
+    }
+
+    .el-select {
+      margin-right: 20px;
+
+      ::v-deep.el-input__inner {
+        background-color: var(--bs-background-1) !important;
+      }
+    }
+  }
+
+  .list-wrap {
+    /* display: grid; */
+    overflow: auto;
+    // 间隙自适应
+    justify-content: space-around;
+    // max-height: calc(100vh - 270px);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-gap: 15px;
+    .big-screen-card-wrap {
+      position: relative;
+      height: 230px;
+      cursor: pointer;
+
+      &:hover {
+        .screen-card__hover {
+          height: 180px;
+        }
+      }
+
+      .screen-card__hover {
+        position: absolute;
+        z-index: 999;
+        top: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        justify-content: center;
+        height: 0;
+        transition: height 0.4s;
+        background: #00000099;
+      }
+
+      .focus {
+        color: var(--bs-el-text) !important;
+        border: 1px solid var(--bs-el-color-primary) !important;
+      }
+
+      .big-screen-card-inner {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background-color: var(--bs-background-2);
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        color: var(--bs-el-title);
+        border: 1px solid var(--bs-background-1);
+
+        &:hover {
+          color: var(--bs-el-text);
+          border: 1px solid var(--bs-el-color-primary);
+        }
+
+        .add-big-screen-card-text {
+          color: var(--bs-el-color-primary);
+          font-size: 24px;
+        }
+
+        .big-screen-card-img {
+          width: 100%;
+          height: 180px;
+
+          img {
+            width: 100%;
+            height: 100%;
+
+            object-fit: cover;
+          }
+
+          ::v-deep.image-slot {
+            height: 100%;
+            background-color: var(--bs-background-2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          ::v-deep.el-image__error {
+            background-color: #1d1d1d;
+          }
+        }
+
+        .big-screen-bottom {
+          display: flex;
+          align-items: center;
+          flex-direction: row;
+          justify-content: space-between;
+          box-sizing: border-box;
+          width: 100%;
+          /*height: 26px;*/
+          padding: 0 10px;
+          height: calc(100% - 180px);
+          color: var(--bs-el-title);
+          background-color: var(--bs-background-2);
+
+          .left-bigscreen-title {
+            font-size: 14px;
+            overflow: hidden;
+            width: 120px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .right-bigscreen-time-title {
+            font-size: 14px;
+            overflow: hidden;
+            width: 140px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .big-screen-card-text {
+          font-size: 14px;
+          padding: 10px;
+          text-align: center;
+          color: #333;
+        }
+      }
+
+      .big-screen-card-inner-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .el-loading-parent--relative {
+    position: unset !important;
+  }
+
+  .footer-pagination-wrap {
+    margin-top: 16px;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.bs-pagination {
+  ::v-deep .el-input__inner {
+    width: 110px !important;
+    border: none;
+    background: var(--bs-el-background-1);
+  }
+}
+
+.empty {
+  width: 100%;
+  height: 70%;
+  min-height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+::v-deep .el-tabs__item {
+  color: var(--bs-el-text);
+}
+
+.error-img-text {
+  overflow: hidden;
+  padding: 0 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+
+::v-deep .el-tabs__nav-wrap {
+  &:after {
+    display: none;
+  }
+}
+.empty{
+  height: calc(100vh - 430px);
+}
+</style>

data-room-ui/packages/G2Plots/plotList.js

@@ -32,6 +32,7 @@ function getPlotList (files) {
       category: configMapKey,
       name: config.name,
       title: config.title,
+      border:{type:''},
       icon: null,
       img: require(`../G2Plots/images/componentLogo/${config.title}.png`),
       className:
@@ -63,6 +64,7 @@ export function getCustomPlots () {
       category: config.category,
       name: config.name,
       title: config.title,
+      border:{type:''},
       icon: null,
       img: config.img,
       className:

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

@@ -245,5 +245,6 @@ export default {
 <style lang="scss" scoped>
 .bs-remote-wrap {
   width: 100%;
+  height: 100%;
 }
 </style>

data-room-ui/packages/RemoteComponents/remoteComponentsList.js

@@ -32,6 +32,7 @@ export function getRemoteComponents (comList) {
       title: config.title,
       icon: null,
       img: config.img,
+      border:{type:''},
       className:
         'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
       w: 450,
@@ -63,6 +64,7 @@ export function getRemoteComponentConfig (code, name) {
     title: name,
     icon: null,
     img: null,
+    border:{type:''},
     className:
       'com.gccloud.dataroom.core.module.chart.components.RemoteComponentChart',
     w: 450,

data-room-ui/packages/Render/RenderCard.vue

@@ -7,13 +7,22 @@
 <template>
   <div class="render-item-wrap">
     <component
-      :is="resolveComponentType(config.type)"
-      :id="`${config.code}`"
-      :ref="config.code"
-      :key="config.key"
+      v-if="config.border&&config.border.type"
+      :is="resolveComponentType(config.border.type)"
+      :id="`border${config.code}`"
+      :ref="`border${config.code}`"
+      :key="`border${config.key}`"
       :config="config"
-      @styleHandler="styleHandler"
     />
+    <div class="element" v-if="config.border&&config.border.type" style="box-sizing:content-box;font-size:20px;color:#fff;margin:20px 0 0 20px">{{config.title}}</div>
+       <component
+        :is="resolveComponentType(config.type)"
+        :id="`${config.code}`"
+        :ref="config.code"
+        :key="config.key"
+        :config="config"
+        @styleHandler="styleHandler"
+      />
   </div>
 </template>
 <script>
@@ -55,7 +64,8 @@ export default {
   data () {
     return {}
   },
-  computed: {},
+  computed: {
+  },
   mounted () {
     // 调用初始化方法
     dataInit(this)
@@ -85,6 +95,9 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
+  align-content: center;
+  position: relative;
   overflow: hidden;
   box-sizing: border-box;
 }

data-room-ui/packages/assets/style/echartStyle.scss

@@ -2,6 +2,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  padding: 0 16px;
   background-color: rgba(0,0,0,0);
   border-radius: 4px;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);

data-room-ui/packages/js/config/basicComponentsConfig.js

@@ -40,9 +40,10 @@ basicConfigList = basicConfigList.map((item) => {
   return basicComponentsConfig(item)
 })
 // 生成基本配置
-export function basicComponentsConfig (item) {
+export function basicComponentsConfig(item) {
   return {
     ...item,
+    border:{type:''},
     option: cloneDeep(setModules[item.type]),
     ...cloneDeep(dataModules[item.type])
   }

data-room-ui/packages/js/utils/componentImport.js

@@ -29,4 +29,5 @@ function importComponents (files) {
 importComponents(require.context('data-room-ui/BasicComponents', true, /\index.vue$/))
 importComponents(require.context('data-room-ui/Borders', true, /\index.vue$/))
 importComponents(require.context('data-room-ui/Decorations', true, /\index.vue$/))
+importComponents(require.context('data-room-ui/BorderComponents', true, /\index.vue$/))
 export default modules