fix: 修复边框组件配置渐变色失效问题

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/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/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/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
           }
         }
       }