Skip to content

D
dataease
提交 fe63b85f authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat: 视图组件支持设置背景图片

上级 fe01f43d
隐藏空白字符变更
内嵌 并排
正在显示 包含 296 行增加 和 114 行删除
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ fe63b85f
......@@ -126,7 +126,8 @@ export default {
'targetLinkageInfo',
'mobileLayoutStatus',
'mobileComponentData',
'componentDataCache'
'componentDataCache',
'styleChangeTimes'
])
},
created() {
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ fe63b85f
......@@ -8,62 +8,64 @@
'rect-shape'
]"
>
<EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
<div v-if="requestStatus==='error'" class="chart-error-class">
<div class="chart-error-message-class">
{{ message }},{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
<div :style="componentBackGround">
<EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
<div v-if="requestStatus==='error'" class="chart-error-class">
<div class="chart-error-message-class">
{{ message }},{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
</div>
</div>
<plugin-com
v-if="chart.isPlugin"
:ref="element.propValue.id"
:component-name="chart.type + '-view'"
:obj="{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
class="chart-class"
/>
<chart-component
v-else-if="charViewShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<chart-component-g2
v-else-if="charViewG2ShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<chart-component-s2
v-else-if="charViewS2ShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<table-normal
v-else-if="tableShowFlag"
:ref="element.propValue.id"
:show-summary="chart.type === 'table-normal'"
:chart="chart"
class="table-class"
/>
<label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
<div style="position: absolute;left: 8px;bottom:8px;">
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
</div>
</div>
<plugin-com
v-if="chart.isPlugin"
:ref="element.propValue.id"
:component-name="chart.type + '-view'"
:obj="{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
class="chart-class"
/>
<chart-component
v-else-if="charViewShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<chart-component-g2
v-else-if="charViewG2ShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<chart-component-s2
v-else-if="charViewS2ShowFlag"
:ref="element.propValue.id"
class="chart-class"
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<table-normal
v-else-if="tableShowFlag"
:ref="element.propValue.id"
:show-summary="chart.type === 'table-normal'"
:chart="chart"
class="table-class"
/>
<label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
<div style="position: absolute;left: 8px;bottom:8px;">
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
</div>
</div>
</template>
......@@ -90,6 +92,7 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default {
name: 'UserView',
components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
......@@ -168,6 +171,31 @@ export default {
this.bindPluginEvent()
},
computed: {
// 视图
componentBackGround() {
const customStyle = JSON.parse(this.chart.customStyle)
let style = {
height: '100%',
width: '100%',
backgroundSize: '100% 100% !important',
borderRadius: '0px'
}
if (customStyle && customStyle.background) {
style.borderRadius = customStyle.background.borderRadius + 'px!important'
if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
style = {
background: `url(${customStyle.background.outImage}) no-repeat`,
...style
}
} else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
style = {
background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
...style
}
}
}
return style
},
scaleCoefficient() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ fe63b85f
import {ApplicationContext} from "@/utils/ApplicationContext";
import {BASE_MOBILE_STYLE, HYPERLINKS} from "@/components/canvas/custom-component/component-list";
import store from "@/store";
import {deepCopy, resetID} from "@/components/canvas/utils/utils";
export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
......@@ -192,7 +197,10 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
}
}
export const DEFAULT_BACKGROUND_COLOR = {
backgroundType: 'color',
color: '#ffffff',
outImage: null,
innerImage: null,
alpha: 100,
borderRadius: 5
}
......
frontend/src/views/chart/chart/common/common.js
浏览文件 @ fe63b85f
......@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
chart_option.radar.splitArea = customStyle.split.splitArea
}
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
// chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
frontend/src/views/chart/chart/common/common_antv.js
浏览文件 @ fe63b85f
......@@ -40,7 +40,7 @@ export function getTheme(chart) {
customStyle = JSON.parse(chart.customStyle)
// bg
if (customStyle.background) {
bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
// bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
// legend
if (customStyle.legend) {
......
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ fe63b85f
......@@ -7,7 +7,7 @@
:style="trackBarStyleTime"
@trackClick="trackClick"
/>
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" />
<div v-if="chart.type === 'map'" class="map-zoom-box">
<div style="margin-bottom: 0.5em;">
<el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" />
......
frontend/src/views/chart/components/ChartComponentG2.vue
浏览文件 @ fe63b85f
......@@ -87,7 +87,7 @@ export default {
},
bg_class() {
return {
borderRadius: this.borderRadius
// borderRadius: this.borderRadius
}
}
},
......
frontend/src/views/chart/components/ChartComponentS2.vue
浏览文件 @ fe63b85f
<template>
<div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
<div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
<span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
<p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
</span>
<div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;" :style="{background:container_bg_class.background}">
<div ref="tableContainer" style="width: 100%;overflow: hidden;padding: 8px;">
<div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
<div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" />
<div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
......@@ -109,7 +109,6 @@ export default {
},
bg_class() {
return {
borderRadius: this.borderRadius
}
}
},
......@@ -259,12 +258,7 @@ export default {
}
},
setBackGroundBorder() {
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.background) {
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
}
}
},
chartResize() {
this.initData()
......@@ -325,12 +319,6 @@ export default {
this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
}
}
if (customStyle.background) {
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
},
......
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
浏览文件 @ fe63b85f
<template>
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-form-item>
<el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">
<el-row>
<el-col :span="5" class="col-label-item">
<el-radio v-model="colorForm.backgroundType" label="color" @change="changeBackgroundStyle"><span class="label-item">{{ $t('chart.color') }}</span></el-radio>
</el-col>
<el-col :span="19">
<el-color-picker v-model="colorForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
</el-col>
</el-row>
<el-row style="height: 60px;margin-top:10px;overflow: hidden">
<el-col :span="5" class="col-label-item">
<el-radio v-model="colorForm.backgroundType" label="outImage" @change="changeBackgroundStyle"><span class="label-item">{{ $t('panel.photo') }}</span></el-radio>
</el-col>
<el-col :span="9">
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif,.svg"
class="avatar-uploader"
list-type="picture-card"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="onChange"
:http-request="upload"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog top="25vh" width="600px" :modal-append-to-body="false" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="col-label-item">
<span class="label-item">{{ $t('chart.border_radius') }}</span>
</el-col>
<el-col :span="19">
<el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row v-if="colorForm.backgroundType==='color'">
<el-col :span="5" class="col-label-item">
<span class="label-item">{{ $t('chart.not_alpha') }}</span>
</el-col>
<el-col :span="19">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-col>
</el-row>
</el-col>
<!-- <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.color')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" />&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'BackgroundColorSelector',
......@@ -34,6 +84,10 @@ export default {
},
data() {
return {
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
predefineColors: COLOR_PANEL
}
......@@ -62,41 +116,117 @@ export default {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.background) {
debugger
this.colorForm = customStyle.background
this.colorForm.backgroundType = this.colorForm.backgroundType || 'color'
if (this.colorForm.outImage && typeof (this.colorForm.outImage) === 'string') {
this.fileList.push({ url: this.colorForm.outImage })
}
}
}
},
onChangeType() {
this.changeBackgroundStyle()
},
handleRemove(file, fileList) {
this.uploadDisabled = false
this.colorForm.outImage = null
this.fileList = []
this.changeBackgroundStyle()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
onChange(file, fileList) {
var _this = this
_this.uploadDisabled = true
const reader = new FileReader()
reader.onload = function() {
_this.colorForm.outImage = reader.result
_this.changeBackgroundStyle()
}
this.$store.state.styleChangeTimes++
reader.readAsDataURL(file.raw)
},
upload(file) {
// console.log('this is upload')
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
.avatar-uploader>>>.el-upload {
width: 100px;
height: 60px;
line-height: 70px;
}
.avatar-uploader>>>.el-upload-list li{
width: 100px !important;
height: 60px !important;
}
.disabled>>>.el-upload--picture-card {
display: none;
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.label-item{
font-size: 12px;
font-weight: bold;
}
.col-label-item{
text-align: right;
padding-right: 10px;
}
</style>
frontend/src/views/chart/components/normal/LabelNormal.vue
浏览文件 @ fe63b85f
......@@ -161,7 +161,7 @@ export default {
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
// this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
},
......
frontend/src/views/chart/components/table/TableNormal.vue
浏览文件 @ fe63b85f
<template>
<div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
<div ref="tableContainer" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
<el-row style="height: 100%;">
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
<ux-grid
......@@ -124,8 +124,6 @@ export default {
computed: {
bg_class() {
return {
background: hexColorToRGBA('#ffffff', 0),
borderRadius: this.borderRadius
}
}
},
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ fe63b85f
......@@ -825,8 +825,8 @@
</el-tabs>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr">
<div ref="imageWrapper" style="height: 100%">
<el-row :style="componentBackGround" class="padding-lr">
<div ref="imageWrapper" style="height: 100%;">
<plugin-com
v-if="httpRequest.status && chart.type && view.isPlugin"
ref="dynamicChart"
......@@ -1064,6 +1064,7 @@ import { compareItem } from '@/views/chart/chart/compare'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
import PluginCom from '@/views/system/plugin/PluginCom'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default {
name: 'ChartEdit',
components: {
......@@ -1206,6 +1207,32 @@ export default {
computed: {
chartType() {
return this.chart.type
},
// 视图
componentBackGround() {
const customStyle = JSON.parse(JSON.stringify(this.view.customStyle))
let style = {
height: '100%',
width: '100%',
backgroundSize: '100% 100% !important'
}
debugger
if (customStyle && customStyle.background) {
style['borderRadius'] = customStyle.background.borderRadius + 'px'
if (customStyle.background.backgroundType === 'outImage' && typeof (customStyle.background.outImage) === 'string') {
style = {
background: `url(${customStyle.background.outImage}) no-repeat`,
...style
}
} else if (!customStyle.background.backgroundType || customStyle.background.backgroundType === 'color') {
style = {
background: hexColorToRGBA(customStyle.background.color, customStyle.background.alpha),
...style
}
}
}
return style
}
},
watch: {
......@@ -1233,6 +1260,7 @@ export default {
// this.initAreas()
},
mounted() {
debugger
this.bindPluginEvent()
// this.get(this.$store.state.chart.viewId);
this.getData(this.param.id)
......@@ -1531,6 +1559,7 @@ export default {
this.closeChangeChart()
// 从仪表板入口关闭
if (this.$route.path.indexOf('panel') > -1) {
this.$store.commit('recordSnapshot')
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
}
this.$success(this.$t('commons.save_success'))
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论