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 { ...@@ -126,7 +126,8 @@ export default {
'targetLinkageInfo', 'targetLinkageInfo',
'mobileLayoutStatus', 'mobileLayoutStatus',
'mobileComponentData', 'mobileComponentData',
'componentDataCache' 'componentDataCache',
'styleChangeTimes'
]) ])
}, },
created() { created() {
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ fe63b85f
...@@ -8,62 +8,64 @@ ...@@ -8,62 +8,64 @@
'rect-shape' 'rect-shape'
]" ]"
> >
<EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" /> <div :style="componentBackGround">
<div v-if="requestStatus==='error'" class="chart-error-class"> <EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
<div class="chart-error-message-class"> <div v-if="requestStatus==='error'" class="chart-error-class">
{{ message }},{{ $t('chart.chart_show_error') }} <div class="chart-error-message-class">
<br> {{ message }},{{ $t('chart.chart_show_error') }}
{{ $t('chart.chart_error_tips') }} <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>
</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>
</div> </div>
</template> </template>
...@@ -90,6 +92,7 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView' ...@@ -90,6 +92,7 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style' import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom' import PluginCom from '@/views/system/plugin/PluginCom'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default { export default {
name: 'UserView', name: 'UserView',
components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 }, components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
...@@ -168,6 +171,31 @@ export default { ...@@ -168,6 +171,31 @@ export default {
this.bindPluginEvent() this.bindPluginEvent()
}, },
computed: { 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() { scaleCoefficient() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) { if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1 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 = { export const DEFAULT_COLOR_CASE = {
value: 'default', value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
...@@ -192,7 +197,10 @@ export const DEFAULT_YAXIS_EXT_STYLE = { ...@@ -192,7 +197,10 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
} }
} }
export const DEFAULT_BACKGROUND_COLOR = { export const DEFAULT_BACKGROUND_COLOR = {
backgroundType: 'color',
color: '#ffffff', color: '#ffffff',
outImage: null,
innerImage: null,
alpha: 100, alpha: 100,
borderRadius: 5 borderRadius: 5
} }
......
frontend/src/views/chart/chart/common/common.js
浏览文件 @ fe63b85f
...@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) { ...@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
chart_option.radar.splitArea = customStyle.split.splitArea chart_option.radar.splitArea = customStyle.split.splitArea
} }
if (customStyle.background) { 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) { ...@@ -40,7 +40,7 @@ export function getTheme(chart) {
customStyle = JSON.parse(chart.customStyle) customStyle = JSON.parse(chart.customStyle)
// bg // bg
if (customStyle.background) { if (customStyle.background) {
bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha) // bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
} }
// legend // legend
if (customStyle.legend) { if (customStyle.legend) {
......
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ fe63b85f
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
:style="trackBarStyleTime" :style="trackBarStyleTime"
@trackClick="trackClick" @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 v-if="chart.type === 'map'" class="map-zoom-box">
<div style="margin-bottom: 0.5em;"> <div style="margin-bottom: 0.5em;">
<el-button size="mini" icon="el-icon-plus" circle @click="roamMap(true)" /> <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 { ...@@ -87,7 +87,7 @@ export default {
}, },
bg_class() { bg_class() {
return { return {
borderRadius: this.borderRadius // borderRadius: this.borderRadius
} }
} }
}, },
......
frontend/src/views/chart/components/ChartComponentS2.vue
浏览文件 @ fe63b85f
<template> <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" /> <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;"> <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> <p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
</span> </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-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-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" /> <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
...@@ -109,7 +109,6 @@ export default { ...@@ -109,7 +109,6 @@ export default {
}, },
bg_class() { bg_class() {
return { return {
borderRadius: this.borderRadius
} }
} }
}, },
...@@ -259,12 +258,7 @@ export default { ...@@ -259,12 +258,7 @@ export default {
} }
}, },
setBackGroundBorder() { setBackGroundBorder() {
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.background) {
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
}
}
}, },
chartResize() { chartResize() {
this.initData() this.initData()
...@@ -325,12 +319,6 @@ export default { ...@@ -325,12 +319,6 @@ export default {
this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px' 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> <template>
<div style="width: 100%"> <div style="width: 100%">
<el-col> <el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini"> <el-row>
<el-form-item :label="$t('chart.color')" class="form-item"> <el-col :span="5" class="col-label-item">
<el-color-picker v-model="colorForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeBackgroundStyle" /> <el-radio v-model="colorForm.backgroundType" label="color" @change="changeBackgroundStyle"><span class="label-item">{{ $t('chart.color') }}</span></el-radio>
</el-form-item> </el-col>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider"> <el-col :span="19">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" /> <el-color-picker v-model="colorForm.color" :predefine="predefineColors" size="mini" style="cursor: pointer;z-index: 1004;" @change="changeBackgroundStyle" />
</el-form-item> </el-col>
</el-row>
<el-form-item :label="$t('chart.border_radius')" class="form-item form-item-slider"> <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-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
</el-form-item> </el-col>
</el-form> </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-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> </div>
</template> </template>
<script> <script>
import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart' import { COLOR_PANEL, DEFAULT_BACKGROUND_COLOR } from '../../chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
name: 'BackgroundColorSelector', name: 'BackgroundColorSelector',
...@@ -34,6 +84,10 @@ export default { ...@@ -34,6 +84,10 @@ export default {
}, },
data() { data() {
return { return {
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)), colorForm: JSON.parse(JSON.stringify(DEFAULT_BACKGROUND_COLOR)),
predefineColors: COLOR_PANEL predefineColors: COLOR_PANEL
} }
...@@ -62,41 +116,117 @@ export default { ...@@ -62,41 +116,117 @@ export default {
customStyle = JSON.parse(chart.customStyle) customStyle = JSON.parse(chart.customStyle)
} }
if (customStyle.background) { if (customStyle.background) {
debugger
this.colorForm = customStyle.background 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> </script>
<style scoped> <style scoped>
.shape-item{ .shape-item{
padding: 6px; padding: 6px;
border: none; border: none;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.form-item-slider>>>.el-form-item__label{ .form-item-slider>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
line-height: 38px; line-height: 38px;
} }
.form-item>>>.el-form-item__label{ .form-item>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
} }
.el-select-dropdown__item{ .el-select-dropdown__item{
padding: 0 20px; padding: 0 20px;
} }
span{ span{
font-size: 12px font-size: 12px
} }
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.color-picker-style{ .color-picker-style{
cursor: pointer; cursor: pointer;
z-index: 1003; 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> </style>
frontend/src/views/chart/components/normal/LabelNormal.vue
浏览文件 @ fe63b85f
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal' this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
} }
if (customStyle.background) { 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> <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%;"> <el-row style="height: 100%;">
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p> <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
<ux-grid <ux-grid
...@@ -124,8 +124,6 @@ export default { ...@@ -124,8 +124,6 @@ export default {
computed: { computed: {
bg_class() { bg_class() {
return { return {
background: hexColorToRGBA('#ffffff', 0),
borderRadius: this.borderRadius
} }
} }
}, },
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ fe63b85f
...@@ -825,8 +825,8 @@ ...@@ -825,8 +825,8 @@
</el-tabs> </el-tabs>
<el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"> <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
<el-row style="width: 100%;height: 100%;" class="padding-lr"> <el-row :style="componentBackGround" class="padding-lr">
<div ref="imageWrapper" style="height: 100%"> <div ref="imageWrapper" style="height: 100%;">
<plugin-com <plugin-com
v-if="httpRequest.status && chart.type && view.isPlugin" v-if="httpRequest.status && chart.type && view.isPlugin"
ref="dynamicChart" ref="dynamicChart"
...@@ -1064,6 +1064,7 @@ import { compareItem } from '@/views/chart/chart/compare' ...@@ -1064,6 +1064,7 @@ import { compareItem } from '@/views/chart/chart/compare'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem' import DimensionExtItem from '@/views/chart/components/drag-item/DimensionExtItem'
import PluginCom from '@/views/system/plugin/PluginCom' import PluginCom from '@/views/system/plugin/PluginCom'
import { hexColorToRGBA } from '@/views/chart/chart/util'
export default { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { components: {
...@@ -1206,6 +1207,32 @@ export default { ...@@ -1206,6 +1207,32 @@ export default {
computed: { computed: {
chartType() { chartType() {
return this.chart.type 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: { watch: {
...@@ -1233,6 +1260,7 @@ export default { ...@@ -1233,6 +1260,7 @@ export default {
// this.initAreas() // this.initAreas()
}, },
mounted() { mounted() {
debugger
this.bindPluginEvent() this.bindPluginEvent()
// this.get(this.$store.state.chart.viewId); // this.get(this.$store.state.chart.viewId);
this.getData(this.param.id) this.getData(this.param.id)
...@@ -1531,6 +1559,7 @@ export default { ...@@ -1531,6 +1559,7 @@ export default {
this.closeChangeChart() this.closeChangeChart()
// 从仪表板入口关闭 // 从仪表板入口关闭
if (this.$route.path.indexOf('panel') > -1) { if (this.$route.path.indexOf('panel') > -1) {
this.$store.commit('recordSnapshot')
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' }) bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
} }
this.$success(this.$t('commons.save_success')) this.$success(this.$t('commons.save_success'))
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论