Merge remote-tracking branch 'origin/master'

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

data-room-ui/packages/js/store/actions.js

@@ -17,32 +17,41 @@ export default {
         // 配置兼容
         const pageInfo = handleResData(data)
         // 兼容边框配置
-        pageInfo.chartList.forEach((item) => {
-          if (item.dataSource) {
-            item.dataSource.source = item.dataSource?.source || 'dataset'
+        pageInfo.chartList.forEach((chart) => {
+          if (chart.dataSource) {
+            chart.dataSource.source = chart.dataSource?.source || 'dataset'
           }
 
-          if (!item.border) {
-            item.border = { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] }
+          if (!chart.border) {
+            chart.border = { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] }
           }
-          if (!item.border.padding) {
-            item.border.padding = [0, 0, 0, 0]
+          if (!chart.border.padding) {
+            chart.border.padding = [0, 0, 0, 0]
           }
-          if (item.type == 'customComponent') {
-            plotSettings[Symbol.iterator] = function * () {
-              const keys = Object.keys(plotSettings)
-              for (const k of keys) {
-                yield [k, plotSettings[k]]
+          let plotSettingsIterator = false
+          if (chart.type == 'customComponent') {
+            // 为本地G2组件配置添加迭代器
+            if (!plotSettingsIterator) {
+              plotSettings[Symbol.iterator] = function * () {
+                const keys = Object.keys(plotSettings)
+                for (const k of keys) {
+                  yield [k, plotSettings[k]]
+                }
               }
             }
-            for (const [key, value] of plotSettings) {
-              if (item.name == value.name) {
-                const settings = JSON.parse(JSON.stringify(value.setting))
-                item.setting = settings.map((x) => {
-                  const index = item.setting.findIndex(y => y.field == x.field)
-                  x.field = item.setting[index].field
-                  x.value = item.setting[index].value
-                  return x
+            for (const [key, localPlotSetting] of plotSettings) {
+              if (chart.name == localPlotSetting.name) {
+                // 本地配置项
+                const localSettings = JSON.parse(JSON.stringify(localPlotSetting.setting))
+                chart.setting = localSettings.map((localSet) => {
+                  // 在远程组件配置中找到 与 本地组件的配置项 相同的项索引
+                  const index = chart.setting.findIndex(remoteSet => remoteSet.field == localSet.field)
+                  if (index !== -1) {
+                    // 使用远程的值替换本地值
+                    localSet.field = chart.setting[index].field
+                    localSet.value = chart.setting[index].value
+                  }
+                  return localSet
                 })
               }
             }