forked from github/dataease
feat(视图): 支持标题备注
This commit is contained in:
junjun
parent
051f61400a
commit
ef41583187
@ -2,7 +2,10 @@
|
||||
<div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
|
||||
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
|
||||
<span v-if="chart.type && antVRenderStatus" 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>
|
||||
<div>
|
||||
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
|
||||
</div>
|
||||
</span>
|
||||
<div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
|
||||
</div>
|
||||
@ -12,7 +15,7 @@
|
||||
import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { baseBarOptionAntV, hBaseBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
|
||||
import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
|
||||
import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
|
||||
@ -23,10 +26,11 @@ import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
|
||||
import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
|
||||
import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
|
||||
import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponentG2',
|
||||
components: { ViewTrackBar },
|
||||
components: { TitleRemark, ViewTrackBar },
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -84,7 +88,11 @@ export default {
|
||||
title_show: true,
|
||||
antVRenderStatus: false,
|
||||
linkageActiveParam: null,
|
||||
linkageActiveHistory: false
|
||||
linkageActiveHistory: false,
|
||||
remarkCfg: {
|
||||
show: false,
|
||||
content: ''
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
@ -320,6 +328,7 @@ export default {
|
||||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||||
}
|
||||
}
|
||||
this.initRemark()
|
||||
},
|
||||
|
||||
calcHeightRightNow() {
|
||||
@ -337,6 +346,9 @@ export default {
|
||||
setTimeout(() => {
|
||||
this.calcHeightRightNow()
|
||||
}, 100)
|
||||
},
|
||||
initRemark() {
|
||||
this.remarkCfg = getRemark(this.chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
<div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
|
||||
<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>
|
||||
<div>
|
||||
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
|
||||
</div>
|
||||
</span>
|
||||
<div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
|
||||
<div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
|
||||
@ -34,12 +37,13 @@
|
||||
<script>
|
||||
import { uuid } from 'vue-uuid'
|
||||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponentS2',
|
||||
components: { ViewTrackBar },
|
||||
components: { TitleRemark, ViewTrackBar },
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -102,7 +106,11 @@ export default {
|
||||
tableData: [],
|
||||
showPage: false,
|
||||
scrollTimer: null,
|
||||
scrollTop: 0
|
||||
scrollTop: 0,
|
||||
remarkCfg: {
|
||||
show: false,
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -322,6 +330,7 @@ export default {
|
||||
this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||
}
|
||||
}
|
||||
this.initRemark()
|
||||
},
|
||||
|
||||
calcHeightRightNow() {
|
||||
@ -389,6 +398,9 @@ export default {
|
||||
this.myChart.render()
|
||||
}, senior.scrollCfg.interval)
|
||||
}
|
||||
},
|
||||
initRemark() {
|
||||
this.remarkCfg = getRemark(this.chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,8 +36,44 @@
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="titleForm.remarkShow">
|
||||
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
|
||||
<el-button
|
||||
:title="$t('chart.edit')"
|
||||
icon="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="editRemark"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
|
||||
<el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
</el-col>
|
||||
|
||||
<!--富文本编辑框-->
|
||||
<el-dialog
|
||||
v-if="showEditRemark"
|
||||
v-dialogDrag
|
||||
:title="$t('chart.remark')"
|
||||
:visible="showEditRemark"
|
||||
:show-close="false"
|
||||
width="70%"
|
||||
class="dialog-css"
|
||||
append-to-body
|
||||
>
|
||||
<remark-editor :remark="titleForm.remark" @onRemarkChange="onRemarkChange" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeRemark">{{ $t('chart.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="changeRemark">{{ $t('chart.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -45,9 +81,11 @@
|
||||
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
|
||||
import { checkViewTitle } from '@/components/canvas/utils/utils'
|
||||
import { mapState } from 'vuex'
|
||||
import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
|
||||
|
||||
export default {
|
||||
name: 'TitleSelectorAntV',
|
||||
components: { RemarkEditor },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
@ -70,7 +108,9 @@ export default {
|
||||
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
|
||||
fontSize: [],
|
||||
isSetting: false,
|
||||
predefineColors: COLOR_PANEL
|
||||
predefineColors: COLOR_PANEL,
|
||||
showEditRemark: false,
|
||||
tmpRemark: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -101,6 +141,9 @@ export default {
|
||||
}
|
||||
if (customStyle.text) {
|
||||
this.titleForm = customStyle.text
|
||||
this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
|
||||
this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
|
||||
this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
|
||||
}
|
||||
if (!this.batchOptStatus) {
|
||||
this.titleForm.title = this.chart.title
|
||||
@ -138,6 +181,21 @@ export default {
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
},
|
||||
|
||||
editRemark() {
|
||||
this.showEditRemark = true
|
||||
},
|
||||
closeRemark() {
|
||||
this.showEditRemark = false
|
||||
},
|
||||
changeRemark() {
|
||||
this.titleForm.remark = this.tmpRemark
|
||||
this.changeTitleStyle('remark')
|
||||
this.closeRemark()
|
||||
},
|
||||
onRemarkChange(val) {
|
||||
this.tmpRemark = val
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -162,12 +220,12 @@ export default {
|
||||
.el-select-dropdown__item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
span{
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
span{
|
||||
font-size: 12px
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.switch-style{
|
||||
position: absolute;
|
||||
@ -178,4 +236,16 @@ export default {
|
||||
cursor: pointer;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.dialog-css >>> .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div style="max-height: 50vh;overflow-y: auto;">
|
||||
<Editor
|
||||
v-model="content"
|
||||
style="width: 100%;height: 100%"
|
||||
:init="init"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
|
||||
import Editor from '@tinymce/tinymce-vue'// 编辑器引入
|
||||
export default {
|
||||
name: 'RemarkEditor',
|
||||
components: {
|
||||
Editor
|
||||
},
|
||||
props: {
|
||||
remark: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
// 初始化配置
|
||||
init: {
|
||||
auto_focus: true,
|
||||
toolbar_items_size: 'small',
|
||||
language_url: '/tinymce/langs/zh_CN.js', // 汉化路径是自定义的，一般放在public或static里面
|
||||
language: 'zh_CN',
|
||||
skin_url: '/tinymce/skins/ui/oxide', // 皮肤
|
||||
content_css: '/tinymce/skins/content/default/content.css',
|
||||
plugins: 'advlist autolink link image lists charmap media wordcount table contextmenu directionality pagebreak', // 插件
|
||||
// 工具栏
|
||||
toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
|
||||
'alignleft aligncenter alignright | bullist numlist |' +
|
||||
' blockquote subscript superscript removeformat | table image media | fullscreen ' +
|
||||
'| bdmap indent2em lineheight formatpainter axupimgs',
|
||||
toolbar_location: '/',
|
||||
toolbar_mode: 'wrap',
|
||||
font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
|
||||
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
|
||||
menubar: false,
|
||||
branding: false,
|
||||
height: 300,
|
||||
min_height: 200,
|
||||
max_height: 500,
|
||||
elementpath: false,
|
||||
statusbar: false
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
content: {
|
||||
handler(newValue) {
|
||||
this.$emit('onRemarkChange', newValue)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.content = this.remark
|
||||
tinymce.init({})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
|
||||
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
|
||||
<div ref="tableContainer" :style="bg_class" style="width: 100%;height: 100%;overflow: hidden;">
|
||||
<span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
|
||||
<div>
|
||||
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
|
||||
id="label-content"
|
||||
@ -21,12 +26,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hexColorToRGBA } from '../../chart/util'
|
||||
import { getRemark, hexColorToRGBA } from '../../chart/util'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
|
||||
export default {
|
||||
name: 'LabelNormal',
|
||||
components: { TitleRemark },
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -78,7 +85,11 @@ export default {
|
||||
},
|
||||
title_show: true,
|
||||
borderRadius: '0px',
|
||||
result: ''
|
||||
result: '',
|
||||
remarkCfg: {
|
||||
show: false,
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -113,6 +124,7 @@ export default {
|
||||
that.calcHeight()
|
||||
}
|
||||
this.setBackGroundBorder()
|
||||
this.initRemark()
|
||||
},
|
||||
setBackGroundBorder() {
|
||||
if (this.chart.customStyle) {
|
||||
@ -243,13 +255,16 @@ export default {
|
||||
const v = valueFormatter(value, formatterItem)
|
||||
this.result = v.includes('NaN') ? value : v
|
||||
}
|
||||
},
|
||||
initRemark() {
|
||||
this.remarkCfg = getRemark(this.chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div ref="tableContainer" :style="bg_class" style="width: 100%;height: 100%;overflow: hidden;">
|
||||
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
|
||||
<p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
|
||||
<span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
|
||||
<div>
|
||||
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
v-if="chart.data && chart.data.series && chart.data.series.length > 0"
|
||||
id="label-content"
|
||||
@ -22,13 +27,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hexColorToRGBA } from '../../chart/util'
|
||||
import { getRemark, hexColorToRGBA } from '../../chart/util'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
|
||||
export default {
|
||||
name: 'LabelNormalText',
|
||||
components: { ViewTrackBar },
|
||||
components: { TitleRemark, ViewTrackBar },
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -93,7 +99,11 @@ export default {
|
||||
left: '0px',
|
||||
top: '0px'
|
||||
},
|
||||
pointParam: null
|
||||
pointParam: null,
|
||||
remarkCfg: {
|
||||
show: false,
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -130,6 +140,7 @@ export default {
|
||||
that.calcHeight()
|
||||
}
|
||||
this.setBackGroundBorder()
|
||||
this.initRemark()
|
||||
},
|
||||
setBackGroundBorder() {
|
||||
if (this.chart.customStyle) {
|
||||
@ -244,13 +255,16 @@ export default {
|
||||
this.trackBarStyle.top = (this.$refs['textData'].offsetTop + this.$refs['textData'].offsetHeight + 10) + 'px'
|
||||
this.$refs.viewTrack.trackButtonClick()
|
||||
}
|
||||
},
|
||||
initRemark() {
|
||||
this.remarkCfg = getRemark(this.chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user