forked from github/dataease
Merge branch 'dev' of github.com:dataease/dataease into dev
This commit is contained in:
commit
a753e4e66c
@ -10,19 +10,16 @@
|
||||
|
||||
<select id="searchOneWithPrivileges" resultMap="BaseResultMapDTO">
|
||||
select
|
||||
chart_view.*,
|
||||
get_auths(id,'chart',#{userId}) as `privileges`
|
||||
chart_view.*
|
||||
from chart_view where id = #{id}
|
||||
</select>
|
||||
|
||||
<select id="searchOne" resultMap="BaseResultMapDTO">
|
||||
select
|
||||
id, `name`, scene_id, table_id, `type`, title, create_by, create_time, update_time,
|
||||
style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot,
|
||||
get_auths(id,'chart',#{userId}) as `privileges`
|
||||
from (select GET_V_AUTH_MODEL_ID_P_USE (#{userId}, 'chart') cids) t,chart_view
|
||||
style_priority,x_axis, y_axis, custom_attr, custom_style, custom_filter, snapshot
|
||||
from chart_view
|
||||
<where>
|
||||
FIND_IN_SET(chart_view.id,cids)
|
||||
<if test="sceneId != null">
|
||||
and scene_id = #{sceneId,jdbcType=VARCHAR}
|
||||
</if>
|
||||
@ -94,6 +91,7 @@
|
||||
`type`,
|
||||
`title`,
|
||||
`x_axis`,
|
||||
`x_axis_ext`,
|
||||
`y_axis`,
|
||||
`custom_attr`,
|
||||
`custom_style`,
|
||||
@ -119,6 +117,7 @@
|
||||
`type`,
|
||||
GET_CHART_VIEW_COPY_NAME ( #{oldChartId} ),
|
||||
`x_axis`,
|
||||
`x_axis_ext`,
|
||||
`y_axis`,
|
||||
`custom_attr`,
|
||||
`custom_style`,
|
||||
|
@ -130,9 +130,5 @@ public class ChartGroupService {
|
||||
if (ObjectUtils.isNotEmpty(chartGroup.getLevel())) {
|
||||
criteria.andLevelEqualTo(chartGroup.getLevel());
|
||||
}
|
||||
List<ChartGroup> list = chartGroupMapper.selectByExample(chartGroupExample);
|
||||
if (list.size() > 0) {
|
||||
throw new RuntimeException(Translator.get("i18n_name_cant_repeat_same_group"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1656,10 +1656,6 @@ public class ChartViewService {
|
||||
if (StringUtils.isNotEmpty(chartView.getName())) {
|
||||
criteria.andNameEqualTo(chartView.getName());
|
||||
}
|
||||
List<ChartViewWithBLOBs> list = chartViewMapper.selectByExampleWithBLOBs(chartViewExample);
|
||||
if (list.size() > 0) {
|
||||
throw new RuntimeException(Translator.get("i18n_name_cant_repeat_same_group"));
|
||||
}
|
||||
}
|
||||
|
||||
public ChartDetail getChartDetail(String id) {
|
||||
|
@ -74,11 +74,12 @@ public class PanelViewService {
|
||||
|
||||
@Transactional(propagation=Propagation.REQUIRES_NEW)
|
||||
public Boolean syncPanelViews(PanelGroupWithBLOBs panelGroup){
|
||||
Boolean mobileLayout = false;
|
||||
Boolean mobileLayout = null;
|
||||
String panelId = panelGroup.getId();
|
||||
Assert.notNull(panelId, "panelId cannot be null");
|
||||
String panelData = panelGroup.getPanelData();
|
||||
if(StringUtils.isNotEmpty(panelData)){
|
||||
mobileLayout = false;
|
||||
JSONArray dataArray = JSON.parseArray(panelData);
|
||||
List<PanelViewInsertDTO> panelViewInsertDTOList = new ArrayList<>();
|
||||
for(int i=0;i<dataArray.size();i++){
|
||||
|
@ -126,7 +126,8 @@ export default {
|
||||
'targetLinkageInfo',
|
||||
'mobileLayoutStatus',
|
||||
'mobileComponentData',
|
||||
'componentDataCache'
|
||||
'componentDataCache',
|
||||
'styleChangeTimes'
|
||||
])
|
||||
},
|
||||
created() {
|
||||
|
@ -8,6 +8,7 @@
|
||||
'rect-shape'
|
||||
]"
|
||||
>
|
||||
<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">
|
||||
@ -66,6 +67,7 @@
|
||||
<drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -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 },
|
||||
@ -166,6 +169,31 @@ export default {
|
||||
},
|
||||
|
||||
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
|
||||
|
@ -1,3 +1,8 @@
|
||||
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
|
||||
}
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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)" />
|
||||
|
@ -87,7 +87,7 @@ export default {
|
||||
},
|
||||
bg_class() {
|
||||
return {
|
||||
borderRadius: this.borderRadius
|
||||
// borderRadius: this.borderRadius
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -1,10 +1,10 @@
|
||||
<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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -1,24 +1,74 @@
|
||||
<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-slider v-model="colorForm.borderRadius" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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-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)">-->
|
||||
<!-- <!– <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-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{
|
||||
.shape-item{
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.form-item-slider>>>.el-form-item__label{
|
||||
}
|
||||
.form-item-slider>>>.el-form-item__label{
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.form-item>>>.el-form-item__label{
|
||||
}
|
||||
.form-item>>>.el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.color-picker-style{
|
||||
.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>
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -1,5 +1,5 @@
|
||||
<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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -46,7 +46,6 @@
|
||||
/>
|
||||
<el-button
|
||||
:title="$t('chart.change_ds')"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
icon="el-icon-refresh"
|
||||
type="text"
|
||||
size="mini"
|
||||
@ -62,7 +61,6 @@
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
@add="moveToDimension"
|
||||
>
|
||||
<transition-group>
|
||||
@ -88,7 +86,6 @@
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
class="drag-list"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
@add="moveToQuota"
|
||||
>
|
||||
<transition-group>
|
||||
@ -157,7 +154,6 @@
|
||||
<el-radio-group
|
||||
v-model="view.type"
|
||||
style="width: 100%"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
@change="changeChartType()"
|
||||
>
|
||||
<chart-type ref="cu-chart-type" :chart="view" style="height: 480px" />
|
||||
@ -182,7 +178,6 @@
|
||||
slot="reference"
|
||||
size="mini"
|
||||
style="padding: 6px;"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
>
|
||||
{{ $t('chart.change_chart_type') }}
|
||||
<i class="el-icon-caret-bottom" />
|
||||
@ -202,7 +197,6 @@
|
||||
<el-radio-group
|
||||
v-model="view.resultMode"
|
||||
class="radio-span"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
size="mini"
|
||||
@change="calcData"
|
||||
>
|
||||
@ -212,7 +206,6 @@
|
||||
v-model="view.resultCount"
|
||||
class="result-count"
|
||||
size="mini"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
@change="calcData"
|
||||
/>
|
||||
</el-radio>
|
||||
@ -237,7 +230,6 @@
|
||||
:no-children-text="$t('commons.treeselect.no_children_text')"
|
||||
:no-options-text="$t('commons.treeselect.no_options_text')"
|
||||
:no-results-text="$t('commons.treeselect.no_results_text')"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
@input="calcData"
|
||||
@deselect="calcData"
|
||||
/>
|
||||
@ -256,7 +248,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.xaxisExt"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -310,7 +301,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.xaxis"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -364,7 +354,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.yaxis"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -403,7 +392,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.yaxisExt"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -442,7 +430,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.extStack"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -484,7 +471,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.extBubble"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -518,7 +504,6 @@
|
||||
<!-- </el-button>-->
|
||||
<draggable
|
||||
v-model="view.customFilter"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -557,7 +542,6 @@
|
||||
</span>
|
||||
<draggable
|
||||
v-model="view.drillFields"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
group="drag"
|
||||
animation="300"
|
||||
:move="onMove"
|
||||
@ -609,7 +593,6 @@
|
||||
<el-radio-group
|
||||
v-model="view.stylePriority"
|
||||
class="radio-span"
|
||||
:disabled="!hasDataPermission('manage',param.privileges)"
|
||||
size="mini"
|
||||
@change="calcStyle"
|
||||
>
|
||||
@ -825,8 +808,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 +1047,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 +1190,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 +1243,7 @@ export default {
|
||||
// this.initAreas()
|
||||
},
|
||||
mounted() {
|
||||
debugger
|
||||
this.bindPluginEvent()
|
||||
// this.get(this.$store.state.chart.viewId);
|
||||
this.getData(this.param.id)
|
||||
@ -1531,6 +1542,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'))
|
||||
|
Loading…
Reference in New Issue
Block a user