feat:边框组件添加

data-room-ui/packages/BigScreenDesign/BorderSetting.vue

@@ -121,6 +121,7 @@
 </template>
 <script>
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 export default {

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

@@ -6,7 +6,7 @@
       label="边框"
     >
     <el-input
-      v-model="config.type"
+      v-model="title"
       clearable
       read-only
       placeholder="请选择边框"
@@ -194,8 +194,27 @@ export default {
     }
   },
   computed:{
+    title:{
+      set(){
+       this.config.type=''
+      },
+      get(){
+       plotList[Symbol.iterator]=function*(){
+        let keys=Object.keys(plotList)
+        for(let k of keys){
+          yield [k,plotList[k]]
+        }
+      }
+      let name
+      for(let [key,value] of plotList){
+        if(value.type==this.config.type){
+          name=value.name
+        }
+      }
+      return name
+      }
+    },
     list(){
-      console.log(plotList)
       plotList[Symbol.iterator]=function*(){
         let keys=Object.keys(plotList)
         for(let k of keys){

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

@@ -133,7 +133,6 @@ export default {
     // 更新数据源部分，需要调用接口
     configDataSource: {
       handler (val, oldValue) {
-        console.log('oldValue', oldValue)
         this.handleConfigChange(val, oldValue, 'configDataSource')
       },
       deep: true

data-room-ui/packages/BorderComponents/GcBorder13/setting.js

@@ -1,5 +1,5 @@
 
-const type = 'GcBorder8'
+const type = 'GcBorder13'
 
 const name='边框十三'
 // 右侧配置项

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

@@ -6,6 +6,7 @@
      <dv-border-box-4
       :id="'dataV' + config.code"
       :background-color="backgroundColor"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -42,6 +43,15 @@ export default {
     }
   },
   computed: {
+    borderColor () {
+      return this.config.border.borderMainColor ||
+        this.config.border.borderSecondaryColor
+        ? [
+            this.config.border.borderMainColor,
+            this.config.border.borderSecondaryColor
+          ]
+        : null
+    },
     color () {
       return this.config.border.fontColor ? this.config.border.fontColor
         : '#fff'

data-room-ui/packages/BorderComponents/GcBorder4/setting.js

@@ -30,6 +30,30 @@ const setting = [
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框主颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
 
 
 ]

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

@@ -51,7 +51,7 @@
                   class="left-bigscreen-title"
                   :title="component.title"
                 >
-                  {{ component.title }}
+                  {{ getName(component.title) }}
                 </div>
               </div>
             </div>
@@ -88,6 +88,7 @@
 import { pageMixins } from 'data-room-ui/js/mixins/page'
 import isEmpty from 'lodash/isEmpty'
 import cloneDeep from 'lodash/cloneDeep'
+import plotList from 'data-room-ui/BorderComponents/settingList.js'
 import borderComponents from 'data-room-ui/BorderComponents/bordersList'
 export default {
   name: 'ComponentDialog',
@@ -127,6 +128,21 @@ export default {
     this.remoteComponentlist = [...borderComponents]
   },
   methods: {
+    getName(title){
+      plotList[Symbol.iterator]=function*(){
+        let keys=Object.keys(plotList)
+        for(let k of keys){
+          yield [k,plotList[k]]
+        }
+      }
+      let name
+      for(let [key,value] of plotList){
+        if(value.type==title){
+          name=value.name
+        }
+      }
+      return name
+    },
     chooseComponent (component) {
       this.focus = cloneDeep(component)
     },