fix: 修改渐变涂颜色选择组件，支持点击渐变箭头切换渐变方向；修复大屏设计新上传的背景图无法正常显示的问题

data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue

@@ -82,6 +82,8 @@
   </el-dialog>
 </template>
 <script>
+import { getFileUrl } from 'data-room-ui/js/utils/file'
+
 export default {
   name: 'BgImgDialog',
   props: {
@@ -114,10 +116,10 @@ export default {
     init () {
       this.dialogVisible = true
       this.imgUrl = this.form.customTheme === 'light' ? this.form.bg : this.form.lightBg
-      this.fileList = this.imgUrl
+      this.fileList = this.getCoverPicture(this.imgUrl)
         ? [{
             name: '背景图',
-            url: this.imgUrl
+            url: this.getCoverPicture(this.imgUrl)
           }]
         : []
       this.hideUploadImgBtn = this.fileList.length !== 0
@@ -155,6 +157,14 @@ export default {
     },
     confirm () {
       this.dialogVisible = false
+    },
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
     }
   }
 }

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

@@ -97,7 +97,7 @@
             <el-image
               v-if="form[currentBg]"
               class="bg-img bs-el-img"
-              :src="form[currentBg]"
+              :src="getCoverPicture(form[currentBg])"
               fit="cover"
               @click="$refs.bgImg.init()"
             />
@@ -200,6 +200,7 @@ import BgImg from './BgImgDialog.vue'
 import { mapState, mapMutations } from 'vuex'
 import { themeToSetting } from 'data-room-ui/js/utils/themeFormatting'
 import {predefineColors} from 'data-room-ui/js/utils/colorList'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 export default {
   name: 'OverallSetting',
   components: {
@@ -488,6 +489,14 @@ export default {
     snapHandler (val) {
       // this.$emit('changeSnap', val)
       this.snapChange(val)
+    },
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
     }
   }
 }

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

@@ -6,7 +6,7 @@
       class="bs-el-color-picker"
       popper-class="bs-el-color-picker"
     />
-    <div class="el-icon-right" />
+    <div :class="positionIcon" @click="positionChange" />
     <el-color-picker
       v-model="endColor"
       class="bs-el-color-picker"
@@ -33,7 +33,15 @@ export default {
       startColor: '', // 初始颜色
       endColor: '', // 终止颜色
       position: '', // 渐变方向
-      colorsValue: ''// 拼接后的符合g2语法的颜色值
+      colorsValue: '',// 拼接后的符合g2语法的颜色值
+      positionList: ['l(0)', 'l(90)', 'l(180)', 'l(270)'],
+      positionIconList: {
+        'l(0)': 'el-icon-right',
+        'l(90)': 'el-icon-bottom',
+        'l(180)': 'el-icon-back',
+        'l(270)': 'el-icon-top'
+      },
+      positionIcon: 'el-icon-right'
     }
   },
   computed: {
@@ -51,8 +59,10 @@ export default {
   },
   methods: {
     init () {
+      // color 格式是 'l(0) 0:#ffffff 1:#000000'
       const arr = this.colors?.split(' ') || []
-      this.position = arr[0]
+      this.position = arr[0] || 'l(0)'
+      this.positionIcon = this.positionIconList[this.position] || 'el-icon-right'
       const s = arr[1].split(':')[1] && arr[1].split(':')[1] !== 'null' ? arr[1].split(':')[1] : ''
       const e = arr[2].split(':')[1] && arr[2].split(':')[1] !== 'null' ? arr[2].split(':')[1] : ''
       this.startColor = s
@@ -61,7 +71,14 @@ export default {
     colorChange (val) {
       this.colorsValue = `${this.position} 0:${this.startColor} 1:${this.endColor}`
       this.$emit('change', this.colorsValue)
-    }
+    },
+    positionChange(){
+      // 将position的值循环移动一位
+      const index = this.positionList.indexOf(this.position)
+      this.position = this.positionList[(index + 1) % 4]
+      this.positionIcon = this.positionIconList[this.position]
+      this.colorChange()
+    },
   }
 }
 </script>
@@ -75,6 +92,23 @@ export default {
     .el-icon-right{
       width: 40px;
       text-align: center;
+      cursor: pointer;
+
+    }
+    .el-icon-bottom{
+      width: 40px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .el-icon-back{
+      width: 40px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .el-icon-top {
+      width: 40px;
+      text-align: center;
+      cursor: pointer;
     }
   }
 

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

@@ -42,6 +42,7 @@ import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.
 import NotPermission from 'data-room-ui/NotPermission'
 import Configuration from 'data-room-ui/Render/Configuration.vue'
 import DataViewDialog from 'data-room-ui/BigScreenDesign/DataViewDialog/index.vue'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 export default {
   name: 'BigScreenRun',
   components: {
@@ -99,7 +100,7 @@ export default {
       const bg = this.fitMode !== 'none'
         ? {
             backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor,
-            backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.fitPageConfig.lightBg})` : `url(${this.fitPageConfig.bg})`,
+            backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.getCoverPicture(this.fitPageConfig.lightBg)})` : `url(${this.getCoverPicture(this.fitPageConfig.bg)})`,
             backgroundSize: 'cover'
           }
         : {}
@@ -121,7 +122,7 @@ export default {
       const bg = this.fitMode === 'none'
         ? {
             backgroundColor: this.fitPageConfig.customTheme === 'light' ? this.fitPageConfig.lightBgColor : this.fitPageConfig.bgColor,
-            backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.fitPageConfig.lightBg})` : `url(${this.fitPageConfig.bg})`,
+            backgroundImage: this.fitPageConfig.customTheme === 'light' ? `url(${this.getCoverPicture(this.fitPageConfig.lightBg)})` : `url(${this.getCoverPicture(this.fitPageConfig.bg)})`,
             backgroundSize: 'cover'
           }
         : {}
@@ -378,6 +379,14 @@ export default {
       }
 
       return newPageConfig
+    },
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
     }
   }
 }

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

@@ -7,7 +7,7 @@
       width: pageInfo.pageConfig.w + 'px',
       height: pageInfo.pageConfig.h + 'px',
       backgroundColor:pageInfo.pageConfig.customTheme ==='light' ? pageInfo.pageConfig.lightBgColor:pageInfo.pageConfig.bgColor ,
-      backgroundImage:pageInfo.pageConfig.customTheme ==='light' ? `url(${pageInfo.pageConfig.lightBg})`:`url(${pageInfo.pageConfig.bg})`
+      backgroundImage:pageInfo.pageConfig.customTheme ==='light' ? `url(${this.getCoverPicture(pageInfo.pageConfig.lightBg)})`:`url(${this.getCoverPicture(pageInfo.pageConfig.bg)})`
     }"
     @drop="drop($event)"
     @dragover.prevent
@@ -92,6 +92,7 @@ import { randomString } from '../js/utils'
 import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
 import plotList, { getCustomPlots } from '../G2Plots/plotList'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 
 export default {
   name: 'BigScreenRender',
@@ -455,6 +456,14 @@ export default {
           })
         })
       }
+    },
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
     }
   }
 }