Merge remote-tracking branch 'origin/master'

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

@@ -25,6 +25,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
           <SettingTitle>基础</SettingTitle>

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

@@ -23,6 +23,7 @@
               v-if="config.border"
               label-width="120px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>位置</SettingTitle>

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

@@ -34,6 +34,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -33,6 +33,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
           <SettingTitle>基础</SettingTitle>

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

@@ -30,6 +30,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -33,6 +33,7 @@
             <BorderSetting
               v-if="config.border"
               label-width="100px"
+              :bigTitle='config.title'
               :config="config.border"
             />
           </div>

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

@@ -35,6 +35,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -78,6 +78,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
           <SettingTitle>基础</SettingTitle>

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

@@ -37,6 +37,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -30,6 +30,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -37,6 +37,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -37,6 +37,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -33,6 +33,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
         <SettingTitle>基础</SettingTitle>

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

@@ -32,6 +32,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
         <SettingTitle>基础</SettingTitle>

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

@@ -27,6 +27,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
           <SettingTitle>基础</SettingTitle>

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

@@ -25,6 +25,7 @@
               v-if="config.border"
               label-width="120px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>位置</SettingTitle>

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

@@ -37,6 +37,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -33,6 +33,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -23,6 +23,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -33,6 +33,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
       <SettingTitle>基础</SettingTitle>

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

@@ -34,6 +34,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
         <SettingTitle>基础</SettingTitle>

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

@@ -34,6 +34,7 @@
               v-if="config.border"
               label-width="100px"
               :config="config.border"
+              :bigTitle='config.title'
             />
           </div>
         <SettingTitle>基础</SettingTitle>

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

@@ -104,7 +104,10 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="不透明度">
+          <el-form-item
+            v-if="config.customize.colorType === 'gradient'"
+            label="不透明度"
+          >
             <el-input-number
               v-model="config.customize.opacity"
               class="bs-el-input-number"

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

@@ -72,53 +72,55 @@
       />
     </el-form-item>
     <div v-if="config.type">
-    <el-form-item
-      :label-width="labelWidth"
-      label="是否显示标题"
-    >
-      <el-switch
-          v-model="config.isTitle"
-          class="bs-el-switch"
-          :active-value="true"
-          :inactive-value="false"
-        />
-    </el-form-item>
-    <el-form-item
-      v-if="config.isTitle"
-      :label-width="labelWidth"
-      label="标题高度"
-    >
-      <el-input-number
-        v-model="config.titleHeight"
-        class="bs-el-input-number"
-        :min="0"
-        :step="1"
-      />
-    </el-form-item>
-    <el-form-item
-      v-if="config.isTitle"
-      :label-width="labelWidth"
-      label="标题字体大小"
-    >
-      <el-input-number
-        v-model="config.fontSize"
-        class="bs-el-input-number"
-        :min="0"
-        :step="1"
-      />
-    </el-form-item>
-    <el-form-item
-      v-if="config.isTitle"
-      :label-width="labelWidth"
-      label="标题颜色"
-    >
-      <el-color-picker
-          v-model="config.fontColor"
-          popper-class="bs-el-color-picker"
-          class="bs-el-color-picker"
-          show-alpha
-        />
-    </el-form-item>
+      <div v-if="bigTitle&&config.type!='GcBorder11'">
+         <el-form-item
+          :label-width="labelWidth"
+          label="是否显示标题"
+        >
+          <el-switch
+              v-model="config.isTitle"
+              class="bs-el-switch"
+              :active-value="true"
+              :inactive-value="false"
+            />
+        </el-form-item>
+        <el-form-item
+          v-if="config.isTitle"
+          :label-width="labelWidth"
+          label="标题高度"
+        >
+          <el-input-number
+            v-model="config.titleHeight"
+            class="bs-el-input-number"
+            :min="0"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.isTitle"
+          :label-width="labelWidth"
+          label="标题字体大小"
+        >
+          <el-input-number
+            v-model="config.fontSize"
+            class="bs-el-input-number"
+            :min="0"
+            :step="1"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="config.isTitle"
+          :label-width="labelWidth"
+          label="标题颜色"
+        >
+          <el-color-picker
+              v-model="config.fontColor"
+              popper-class="bs-el-color-picker"
+              class="bs-el-color-picker"
+              show-alpha
+            />
+        </el-form-item>
+      </div>
     <div
       v-for="(setting, settingIndex) in list"
       :key="settingIndex+1"
@@ -250,6 +252,10 @@ export default {
     ColorSelect
   },
   props: {
+    bigTitle:{
+      type: String,
+      default: ''
+    },
     config: {
       type: Object,
       default: () => ({
@@ -296,6 +302,11 @@ export default {
       for(let [key,value] of plotList){
         if(value.type==this.config.type){
           arr=value.setting
+          value.setting.forEach((item)=>{
+            if(item.value){
+              this.config[item.field]=this.config[item.field]||item.value
+            }
+          })
         }
       }
       return arr

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

@@ -27,6 +27,7 @@
           v-if="config.border"
           label-width="120px"
           :config="config.border"
+          :bigTitle='config.title'
         />
       </div>
       <SettingTitle>位置</SettingTitle>

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

@@ -26,17 +26,31 @@
         <div class="left-vue-code component-code">
           <div class="code-tab-header">
             <div class="code-tab-left">
-              <div class="code-tab">组件模板</div>
-              <div class="code-tab-btn" @click="change('echart')">
+              <div class="code-tab">
+                组件模板
+              </div>
+              <div
+                class="code-tab-btn"
+                @click="change('echart')"
+              >
                 echarts组件
               </div>
-              <div class="code-tab-btn" @click="change('g2plot')">
+              <div
+                class="code-tab-btn"
+                @click="change('g2plot')"
+              >
                 G2Plot组件
               </div>
-              <div class="code-tab-btn" @click="change('native')">
+              <div
+                class="code-tab-btn"
+                @click="change('native')"
+              >
                 原生组件
               </div>
-              <div class="code-tab-btn" @click="change('3DEchart')">
+              <div
+                class="code-tab-btn"
+                @click="change('3DEchart')"
+              >
                 3D组件
               </div>
             </div>
@@ -223,7 +237,7 @@ export default {
       const type = this.$route.query.type
       if (code) {
         getBizComponentInfo(code).then(data => {
-         if(type&&type==='g2plot'){
+          if (type && type === 'g2plot') {
             this.form = {
               ...data,
               name: data.name,
@@ -231,7 +245,7 @@ export default {
               settingContent: data.settingContent || defaultG2SettingContent,
               vueContent: data.vueContent || defaultG2VueContent
             }
-          }else if(type&&type==='echart'){
+          } else if (type && type === 'echart') {
             this.form = {
               ...data,
               name: data.name,
@@ -239,7 +253,7 @@ export default {
               settingContent: data.settingContent || defaultEchartsSettingContent,
               vueContent: data.vueContent || defaultEchartsVueContent
             }
-          }else{
+          } else {
             this.form = {
               ...data,
               name: data.name,
@@ -254,29 +268,31 @@ export default {
         })
       }
     },
-    changeTemp(val){
-      if(val=='g2plot'){
-        this.form.settingContent=defaultG2SettingContent
-        this.form.vueContent=defaultG2VueContent
-      }else if(val=='native'){
-        this.form.settingContent=defaultSettingContent
-        this.form.vueContent=defaultVueContent
-      }else if(val=='echart'){
-        this.form.settingContent= defaultEchartsSettingContent
-        this.form.vueContent=defaultEchartsVueContent
+    changeTemp (val) {
+      if (val == 'g2plot') {
+        this.form.settingContent = defaultG2SettingContent
+        this.form.vueContent = defaultG2VueContent
+      } else if (val == 'native') {
+        this.form.settingContent = defaultSettingContent
+        this.form.vueContent = defaultVueContent
+      } else if (val == 'echart') {
+        this.form.settingContent = defaultEchartsSettingContent
+        this.form.vueContent = defaultEchartsVueContent
       }
     },
-    change(val) {
-      if(val==='3DEchart') return this.$confirm('开发中。。。。', '提示', {
-        distinguishCancelAndClose: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        cancelButtonClass: 'cancel-btn',
-        type: 'warning',
-        customClass: 'bs-el-message-box'
-      }).then(() => {
-      }).catch((action) => {
-      })
+    change (val) {
+      if (val === '3DEchart') {
+        return this.$confirm('开发中。。。。', '提示', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          cancelButtonClass: 'cancel-btn',
+          type: 'warning',
+          customClass: 'bs-el-message-box'
+        }).then(() => {
+        }).catch((action) => {
+        })
+      }
       this.$confirm('确定替换为选中模板吗？未保存的代码将被覆盖！', '提示', {
         distinguishCancelAndClose: true,
         confirmButtonText: '确定',

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-1
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -6,18 +6,113 @@ const name = '边框一'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-10
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,18 +5,113 @@ const name='边框十'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]

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

@@ -5,10 +5,13 @@
   >
      <dv-border-box-11
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
+      :title="config.border.title"
+      :title-width="config.border.titleWidth"
     >
-    <div class="element"
+    <!-- <div class="element"
     v-if="config.border.isTitle"
     :style="`
     color:${color};
@@ -17,7 +20,7 @@
     height:${config.border.titleHeight};
     padding:0 0 0 20px`"
     >
-    {{config.title}}</div>
+    {{config.title}}</div> -->
     </dv-border-box-11>
   </div>
 </template>
@@ -40,26 +43,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -6,24 +6,141 @@ const name='边框十一'
 const setting = [
   // 背景色
   {
-    label:'背景色',
+    label:'边框标题',
+    // 设置组件类型， select / input / colorPicker
+    type: 'input',
+    // 字段
+    field: 'title',
+    optionField: 'title', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'标题区域宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'titleWidth',
+    optionField: 'titleWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 250,
+  },
+  {
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
-  }
+  },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]
 
 
 
-
 export default {
   setting,
   type,

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-12
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -6,18 +6,113 @@ const name = '边框十二'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-13
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,18 +5,113 @@ const name='边框十三'
 // 右侧配置项
 const setting = [
   // 背景色
+
+  {
+    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: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'渐变背景色二',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
-  }
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-2
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -4,19 +4,114 @@ const type = 'GcBorder2'
 const name = '边框二'
 // 右侧配置项
 const setting = [
-  // 背景色
+
+  {
+    label:'边框主颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'边框副颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
-  }
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
+
 
 ]
 

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-3
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,18 +5,113 @@ const name='边框三'
 // 右侧配置项
 const setting = [
   // 背景色
+
+  {
+    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: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'渐变背景色二',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
-  }
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]

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

@@ -5,9 +5,10 @@
   >
      <dv-border-box-4
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
+      :reverse='config.border.reverse'
     >
     <div class="element"
     v-if="config.border.isTitle"
@@ -41,6 +42,7 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   computed: {
@@ -57,19 +59,94 @@ export default {
       return this.config.border.fontColor ? this.config.border.fontColor
         : '#fff'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,42 +5,125 @@ const name='边框四'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
   {
-    label:'边框主颜色',
+    label:'边框副颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'borderMainColor',
-    optionField: 'borderMainColor', // 对应options中的字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
   {
-    label:'边框副颜色',
+    label:'渐变背景色一',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'borderSecondaryColor',
-    optionField: 'borderSecondaryColor', // 对应options中的字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
+  {
+    label:'翻转形态',
+    // 设置组件类型， select / input / colorPicker
+    type: 'switch',
+    // 字段
+    field: 'reverse',
+    optionField: 'reverse', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: false,
+  },
 
 
 ]

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

@@ -5,8 +5,10 @@
   >
      <dv-border-box-5
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
+      :reverse='config.border.reverse'
     >
     <div class="element"
     v-if="config.border.isTitle"
@@ -38,28 +40,113 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,25 +5,131 @@ const name='边框五'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
+  {
+    label:'翻转形态',
+    // 设置组件类型， select / input / colorPicker
+    type: 'switch',
+    // 字段
+    field: 'reverse',
+    optionField: 'reverse', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: false,
+  },
 
 
 ]
 
 
 
-
 export default {
   setting,
   type,

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-6
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,26 +5,119 @@ const name = '边框六'
 // 右侧配置项
 const setting = [
   // 背景色
+
+  {
+    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: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'渐变背景色二',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
-  
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]
 
 
 
-
 export default {
   setting,
   type,

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-7
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,25 +5,119 @@ const name= '边框七'
 // 右侧配置项
 const setting = [
   // 背景色
+
+  {
+    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: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'渐变背景色二',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]
 
 
 
-
 export default {
   setting,
   type,

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

@@ -5,8 +5,11 @@
   >
      <dv-border-box-8
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
+      :reverse='config.border.reverse'
+      :dur="config.border.dur"
     >
     <div class="element"
     v-if="config.border.isTitle"
@@ -40,26 +43,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,18 +5,139 @@ const name='边框八'
 // 右侧配置项
 const setting = [
   // 背景色
+
   {
-    label:'背景色',
+    label:'边框主颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
   },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
+  {
+    label:'翻转形态',
+    // 设置组件类型， select / input / colorPicker
+    type: 'switch',
+    // 字段
+    field: 'reverse',
+    optionField: 'reverse', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: false,
+  },
+  {
+    label:'单次动画时长',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'dur',
+    optionField: 'dur', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 3,
+  },
+
+
 
 ]
 

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

@@ -5,7 +5,8 @@
   >
      <dv-border-box-9
       :id="'dataV' + config.code"
-      :background-color="backgroundColor"
+      :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
+      :color='borderColor'
       :key="updateKey"
     >
     <div class="element"
@@ -40,26 +41,111 @@ export default {
   },
   data () {
     return {
+    borderBgId: `borderBg${this.config.code}`
     }
   },
   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'
     },
-    backgroundColor () {
-      return this.config.border.backgroundColor
-        ? this.config.border.backgroundColor
-        : 'transparent'
-    },
-    // colorType () {
-    //   return this.config.border.colorType
-    // }
   },
   watch: {
+    updateKey:{
+      handler (val) {
+        this.$nextTick(()=>{
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor0':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientColor1':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.gradientDirection':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    },
+    'config.border.opacity':{
+         handler (val) {
+          this.changeColor()
+      },immediate: true
+    }
   },
-  mounted () {},
-  methods: {}
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor(){
+      if(!this.config.border.opacity){
+              this.config.border.opacity=100
+            }
+      if(!this.config.border.gradientColor0&&!this.config.border.gradientColor1) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+          const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+          if (borderElement) {
+              borderElement.style.opacity = (this.config.border.opacity / 100)
+              let gradientDirection = ''
+              switch (this.config.border.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${this.config.border.gradientColor0?this.config.border.gradientColor0:this.config.border.gradientColor1}" />
+                        <stop offset="100%" stop-color="${this.config.border.gradientColor1?this.config.border.gradientColor1:this.config.border.gradientColor0}" />
+                      </linearGradient>
+                </defs>`
+              )
+          }
+        }
+    }
+  }
 }
 </script>
 

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

@@ -5,25 +5,119 @@ const name='边框九'
 // 右侧配置项
 const setting = [
   // 背景色
+
+  {
+    label:'边框主颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
   {
-    label:'背景色',
+    label:'边框副颜色',
     // 设置组件类型， select / input / colorPicker
     type: 'colorPicker',
     // 字段
-    field: 'backgroundColor',
-    optionField: 'backgroundColor', // 对应options中的字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
     // 是否多选
     multiple: false,
     // 绑定的值
     value: '',
-  }
+  },
+  {
+    label:'渐变背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'渐变背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: '',
+    options: [
+      {
+        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'
+      }
+    ]
+  },
+  {
+    label:'不透明度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'opacity',
+    optionField: 'opacity', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 100,
+  },
 
 
 ]
 
 
 
-
 export default {
   setting,
   type,

data-room-ui/packages/Borders/Border1/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox1
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   watch: {},
   mounted () {},
   methods: {}

data-room-ui/packages/Borders/Border10/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox10
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border11/index.vue

@@ -14,7 +14,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -23,7 +22,7 @@ export default {
   components: {
     DvBorderBox11
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     title () {
       return this.config.customize.title

data-room-ui/packages/Borders/Border12/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox12
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     color () {
       return this.config.customize.borderMainColor ||

data-room-ui/packages/Borders/Border13/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox13
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border2/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox2
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border3/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox3
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Borders/Border4/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox4
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     reverse () {
       return this.config.customize.reverse

data-room-ui/packages/Borders/Border5/index.vue

@@ -13,7 +13,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox5
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     reverse () {
       return this.config.customize.reverse

data-room-ui/packages/Borders/Border6/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -21,7 +20,7 @@ export default {
   components: {
     DvBorderBox6
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     color () {
       return this.config.customize.borderMainColor ||

data-room-ui/packages/Borders/Border7/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -21,11 +20,11 @@ export default {
   components: {
     DvBorderBox7
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
-  mounted () {},
-  methods: {}
+  mounted () { },
+  methods: { }
 }
 </script>
 

data-room-ui/packages/Borders/Border8/index.vue

@@ -15,13 +15,12 @@
 </template>
 <script>
 import Vue from 'vue'
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 import { dataVMixins } from 'data-room-ui/js/mixins/dataVMixins'
 import { borderBox8 } from '@jiaminghi/data-view'
 Vue.use(borderBox8)
 export default {
   name: 'Border8',
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {
     dur () {
       return this.config.customize.dur

data-room-ui/packages/Borders/Border9/index.vue

@@ -12,7 +12,6 @@
   </div>
 </template>
 <script>
-import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 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'
@@ -22,7 +21,7 @@ export default {
   components: {
     DvBorderBox9
   },
-  mixins: [refreshComponentMixin, dataVMixins],
+  mixins: [dataVMixins],
   computed: {},
   watch: {},
   mounted () {},

data-room-ui/packages/Echarts/3D图/3D固定柱状图.js

@@ -1,14 +1,10 @@
 import * as echarts from 'echarts'
 // 配置版本号
-const version = '2023071001'
-// 分类
-const category = 'Column'
+const version = '2023091901'
 // 标题
 const title = '3D固定柱状图'
-// 类别， new Line()
-const chartType = 'Column'
 // 用于标识，唯一，和文件夹名称一致
-const name = 'FenZuZhuZhuangTu'
+const name = '3DGuDingZhuZhuangTu'
 
 // 右侧配置项
 const setting = [
@@ -96,7 +92,6 @@ const setting = [
     tabName: 'custom',
     groupName: 'graph'
   }
-
 ]
 
 // 配置处理脚本
@@ -107,9 +102,9 @@ const dataHandler = ''
 
 // 图表配置 new Line('domName', option)
 
-const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '本年话务总量', '本年人工话务量', '每万客户呼入量']
-const yData = [300, 1230, 425, 300, 1230, 425]
-const maxData = [1500, 1500, 1500, 1500, 1500, 1500]
+const xData = ['本年话务总量', '本年人工话务量', '每万客户呼入量', '本年话务总量']
+const yData = [300, 1230, 425, 300]
+const maxData = [1500, 1500, 1500, 1500]
 const option = {
   animation: false,
   tooltip: {
@@ -333,10 +328,8 @@ const option = {
   ]
 }
 export default {
-  category,
   version,
   title,
-  chartType,
   name,
   option,
   setting,

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

@@ -74,6 +74,22 @@ export default {
           this.changeStyle(this.config, true)
         }
       }
+    },
+    'config.w': {
+      handler (val) {
+        if (val) {
+          console.log('this.config',this.config);
+          const chartDom = document.getElementById(this.chatId)
+          this.observeChart(chartDom, this.chart, this.config.option)
+        }
+      }
+    },
+    'config.h': {
+      handler (val) {
+        if (val) {
+          this.newChart(this.config)
+        }
+      }
     }
   },
   mounted () {
@@ -117,10 +133,34 @@ export default {
      * 构造chart
      */
     newChart (config) {
+      // console.log('重新渲染图片');
       const chartDom = document.getElementById(this.chatId)
       this.chart = echarts.init(chartDom)
       config.option && this.chart.setOption(config.option)
     },
+    /**
+     * 控制底部阴影大小
+     */
+    observeChart (container, myChart, option) {
+      const resizeObserver = new ResizeObserver(entries => {
+        myChart.resize()
+        // entries[0].contentRect.width:此时监测的盒子的宽度
+        // entries[0].contentRect.height:此时监测的盒子的高度
+        const width = entries[0].contentRect.width
+        const height = entries[0].contentRect.height
+        // 调整长方形的大小
+        option.graphic.children[0].shape.width = width * 0.9
+        // 调整多边形的大小
+        option.graphic.children[1].shape.points = [
+          [width / 10, -height / 6],
+          [width - width / 6, -height / 6],
+          [width * 0.9, 0],
+          [0, 0]
+        ]
+        myChart.setOption(option)
+      })
+      resizeObserver.observe(container)
+    },
     /**
      * 注册事件
      */
@@ -160,6 +200,7 @@ export default {
       return config
     },
     dataFormatting (config, data) {
+      console.log('config', config)
       // 数据返回成功则赋值
       if (data.success) {
         data = data.data
@@ -471,6 +512,7 @@ export default {
     },
     // 组件的样式改变，返回改变后的config
     changeStyle (config, isUpdateTheme) {
+      console.log('組件樣式改變',config)
       config = { ...this.config, ...config }
       config = this.transformSettingToOption(config, 'custom')
       // 这里定义了option和setting是为了保证在执行eval时,optionHandler、dataHandler里面可能会用到，

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

@@ -17,7 +17,7 @@
     <div
       class="render-item-wrap"
       :style="
-      `height:calc(100% - ${(config.border&&config.border.type&&config.border.isTitle)?config.border.titleHeight:0}px);
+      `height:calc(100% - ${(config.border&&config.title&&config.border.type&&config.border.type!='GcBorder11'&&config.border.isTitle)?config.border.titleHeight:0}px);
       padding-top:${config.border?config.border.padding[0]:0}px;
       padding-right:${config.border?config.border.padding[1]:0}px;
       padding-bottom:${config.border?config.border.padding[2]:0}px;

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

@@ -24,6 +24,7 @@ import pcComponent from 'data-room-ui/js/utils/componentImport'
 import { dataInit, destroyedEvent } from 'data-room-ui/js/utils/eventBus'
 import CustomComponent from '../PlotRender/index.vue'
 import Svgs from '../Svgs/index.vue'
+import EchartsComponent from '../EchartsRender/index.vue'
 import RemoteComponent from 'data-room-ui/RemoteComponents/index.vue'
 import cloneDeep from 'lodash/cloneDeep'
 const components = {}
@@ -39,7 +40,8 @@ export default {
     ...components,
     CustomComponent,
     Svgs,
-    RemoteComponent
+    RemoteComponent,
+    EchartsComponent
   },
   props: {
     // 卡片的属性

data-room-ui/packages/js/mixins/dataVMixins.js

@@ -1,3 +1,6 @@
+import { mapMutations, mapState } from 'vuex'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import cloneDeep from 'lodash/cloneDeep'
 const dataVMixins = {
   props: {
     // 卡片的属性
@@ -8,10 +11,15 @@ const dataVMixins = {
   },
   data () {
     return {
-      borderBgId: `borderBg${this.config.code}`
+      updateKey: 0,
+      borderBgId: null
     }
   },
   computed: {
+    ...mapState({
+      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+      activeCode: state => state.bigScreen.activeCode
+    }),
     code () {
       return this.config.code
     },
@@ -31,64 +39,117 @@ const dataVMixins = {
     },
     colorType () {
       return this.config.customize.colorType
+    },
+    Data () {
+      return JSON.parse(JSON.stringify(this.config))
     }
   },
-  mounted () {
-    if (document.querySelector(`#dataV${this.config.code}`)) {
-      const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
-      if (borderElement) {
-        let isBorder7 = false
-        borderElement.childNodes.forEach(e => {
-          if (e._prevClass === 'dv-bb7-line-width-2') {
-            isBorder7 = true
+  watch: {
+    config: {
+      handler: function (val) {
+        if (val && val.customize && val.customize.colorType) {
+          this.changeBorderStyle(this.config)
+          if (val.customize.colorType === 'single') {
+            this.borderBgId = null
+            this.$nextTick(() => {
+              this.updateKey = new Date().getTime()
+            })
+          } else {
+            this.borderBgId = `borderBg${this.config.code}`
+          }
+        }
+      },
+      deep: true
+    },
+    Data: {
+      handler (newVal, oldVal) {
+        this.$nextTick(() => {
+          if ((newVal.w !== oldVal.w) || (newVal.h !== oldVal.h)) {
+            this.$nextTick(() => {
+              this.updateKey = new Date().getTime()
+            })
           }
         })
-        borderElement.style.opacity = (this.config.customize.opacity / 100)
-        if (this.colorType === 'gradient') {
-          if (!isBorder7) {
-            let gradientDirection = ''
-            switch (this.config.customize.gradientDirection) {
-              case 'to right':
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                break
-              case 'to left':
-                gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
-                break
-              case 'to bottom':
-                gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
-                break
-              case 'to top':
-                gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
-                break
-              case 'to bottom right':
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
-                break
-              case 'to bottom left':
-                gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
-                break
-              case 'to top right':
-                gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
-                break
-              case 'to top left':
-                gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
-                break
-              default:
-                gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
-                break
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.changeBorderStyle(this.config)
+  },
+  methods: {
+    ...mapMutations({
+      changeChartConfig: 'bigScreen/changeChartConfig',
+      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+    }),
+    changeStyle (config) {
+      config = { ...this.config, ...config }
+      // 样式改变时更新主题配置
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
+      this.changeChartConfig(config)
+      if (config.code === this.activeCode) {
+        this.changeActiveItemConfig(config)
+      }
+      this.changeBorderStyle(config)
+    },
+    changeBorderStyle (config) {
+      this.borderBgId = `borderBg${config.code}`
+      if (document.querySelector(`#dataV${config.code}`)) {
+        const borderElement = document.querySelector(`#dataV${config.code}`).querySelector('.border') || document.querySelector(`#dataV${config.code}`)?.querySelector('.dv-border-svg-container')
+        if (borderElement) {
+          let isBorder7 = false
+          borderElement.childNodes.forEach(e => {
+            if (e._prevClass === 'dv-bb7-line-width-2') {
+              isBorder7 = true
+            }
+          })
+          borderElement.style.opacity = (config.customize.opacity / 100)
+          if (this.colorType === 'gradient') {
+            if (!isBorder7) {
+              let gradientDirection = ''
+              switch (config.customize.gradientDirection) {
+                case 'to right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+                case 'to left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom':
+                  gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top':
+                  gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
+                  break
+                case 'to bottom right':
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
+                  break
+                case 'to bottom left':
+                  gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
+                  break
+                case 'to top right':
+                  gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
+                  break
+                case 'to top left':
+                  gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
+                  break
+                default:
+                  gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
+                  break
+              }
+              // 在目标元素内的第一个位置插入 <defs> 和其中的内容
+              borderElement.insertAdjacentHTML(
+                'afterbegin',
+                `<defs>
+                      <linearGradient id="${this.borderBgId}" ${gradientDirection}>
+                        <stop offset="0%" stop-color="${config.customize.gradientColor0}" />
+                        <stop offset="100%" stop-color="${config.customize.gradientColor1}" />
+                      </linearGradient>
+                </defs>`
+              )
+            } else {
+              borderElement.style.background = `linear-gradient(${config.customize.gradientDirection},${config.customize.gradientColor0}, ${config.customize.gradientColor1})`
+              isBorder7 = false
             }
-            // 在目标元素内的第一个位置插入 <defs> 和其中的内容
-            borderElement.insertAdjacentHTML(
-              'afterbegin',
-              `<defs>
-                    <linearGradient id="${this.borderBgId}" ${gradientDirection}>
-                      <stop offset="0%" stop-color="${this.config.customize.gradientColor0}" />
-                      <stop offset="100%" stop-color="${this.config.customize.gradientColor1}" />
-                    </linearGradient>
-              </defs>`
-            )
-          } else {
-            borderElement.style.background = `linear-gradient(${this.config.customize.gradientDirection},${this.config.customize.gradientColor0}, ${this.config.customize.gradientColor1})`
-            isBorder7 = false
           }
         }
       }

data-room-ui/packages/js/mixins/refreshBorder.js

@@ -0,0 +1,28 @@
+const refreshBorder = {
+  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
+    }
+  },
+  methods: {
+  }
+}
+
+export { refreshBorder }