tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
main
hong.yang 1 year ago
parent cdb470ad1b
commit e48f2572b5
5 changed files with 81 additions and 10 deletions
Show Stats Download Patch File Download Diff File

14
data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue
Unescape Escape View File

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

11
data-room-ui/packages/BigScreenDesign/OverallSetting/index.vue
Unescape Escape View File

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

42
data-room-ui/packages/BigScreenDesign/RightSetting/GradualSetting/index.vue
Unescape Escape View File

@ -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;
}
}

13
data-room-ui/packages/BigScreenRun/index.vue
Unescape Escape View File

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

11
data-room-ui/packages/Render/index.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save