forked from github/dataease
feat: 文本卡
This commit is contained in:
junjun
parent
59aa355ed9
commit
b4b736de7e
@ -62,6 +62,7 @@
|
||||
class="table-class"
|
||||
/>
|
||||
<label-normal v-else-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
|
||||
<label-normal-text v-else-if="labelTextShowFlag" :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>
|
||||
@ -90,9 +91,10 @@ 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 LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -184,13 +186,13 @@ export default {
|
||||
return this.active && this.inTab && !this.mobileLayoutStatus
|
||||
},
|
||||
charViewShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'echarts'
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
|
||||
},
|
||||
charViewG2ShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
|
||||
},
|
||||
charViewS2ShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
|
||||
},
|
||||
tableShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
|
||||
@ -198,6 +200,9 @@ export default {
|
||||
labelShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
|
||||
},
|
||||
labelTextShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type === 'label'
|
||||
},
|
||||
loadingFlag() {
|
||||
return (this.canvasStyleData.refreshViewLoading || this.searchCount === 0) && this.requestStatus === 'waiting'
|
||||
},
|
||||
|
||||
2
frontend/src/icons/svg/label.svg
Normal file
2
frontend/src/icons/svg/label.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621224495563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7328" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M376.795429 691.2c15.616 0 27.008-10.733714 27.008-27.337143v-46.848h1.316571c20.809143 45.878857 63.451429 74.514286 117.449143 74.514286 88.832 0 147.072-70.619429 147.072-179.620572s-58.569143-179.620571-146.413714-179.620571c-53.028571 0-96 28.964571-116.169143 74.203429h-1.627429v-166.290286c0-17.554286-11.062857-28.946286-27.337143-28.946286-16.274286 0-27.318857 11.373714-27.318857 28.946286v423.68c0 16.914286 10.422857 27.318857 26.020572 27.318857z m490.697142 0.329143c64.091429 0 118.765714-35.145143 137.325715-84.937143 1.938286-5.522286 2.925714-10.733714 2.925714-15.286857 0-13.988571-9.764571-23.753143-23.442286-23.753143-12.361143 0-18.870857 4.882286-26.020571 19.2-17.261714 37.101714-46.537143 57.270857-90.459429 57.270857-63.451429 0-105.106286-50.432-105.106285-131.785143 0-80.694857 41.654857-132.443429 105.106285-132.443428 41.965714 0 72.228571 19.858286 89.782857 57.929143 6.857143 13.659429 13.348571 18.541714 25.398858 18.541714 13.988571 0 23.753143-9.106286 23.753142-23.424 0-3.913143-0.969143-8.777143-2.267428-13.019429-16.274286-49.792-71.917714-87.533714-137.984-87.533714-96.950857 0-160.091429 71.259429-160.091429 180.278857 0 109.659429 63.780571 178.962286 161.078857 178.962286zM116.169143 691.2c49.444571 0 96.310857-27.008 115.84-68.662857h0.969143v42.313143c0.658286 15.926857 11.392 26.678857 26.697143 26.678857 15.597714 0 26.331429-10.733714 26.331428-27.977143v-215.405714c0-70.290286-51.401143-115.529143-133.394286-115.529143-60.854857 0-111.286857 26.697143-130.157714 68.022857-3.584 8.118857-5.851429 15.926857-5.851428 22.765714 0 14.317714 10.404571 23.424 24.722285 23.424 10.093714 0 17.554286-3.584 22.784-12.690285 17.554286-37.412571 45.220571-54.674286 87.204572-54.674286 50.102857 0 79.725714 27.977143 79.725714 73.216v27.337143l-103.808 5.851428C45.531429 491.428571 0 528.201143 0 588.068571 0 650.203429 47.506286 691.2 116.169143 691.2z m394.057143-47.177143c-61.184 0-104.777143-52.388571-104.777143-131.785143 0-79.725714 43.593143-132.114286 104.777143-132.114285 63.104 0 102.802286 51.090286 102.802285 131.785142 0 81.353143-39.68 132.114286-102.820571 132.114286z m-381.037715 1.956572c-43.611429 0-72.905143-23.771429-72.905142-58.898286 0-34.176 27.337143-56.630857 77.769142-60.196572l96.969143-6.180571v33.828571c0 51.419429-45.220571 91.428571-101.851428 91.428572z m700.891429 249.892571a39.168 39.168 0 0 0 39.04-39.058286 39.168 39.168 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.058286 39.04z m154.88 0A39.168 39.168 0 0 0 1024 856.813714c0-21.467429-17.554286-39.04-39.04-39.04-21.485714 0-39.058286 17.572571-39.058286 39.058286 0 21.467429 17.572571 39.04 39.058286 39.04z m-309.76 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z m-154.898286 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.485714 0-39.058286 17.572571-39.058285 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058285-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a39.241143 39.241143 0 0 0 39.350857-39.058286 39.222857 39.222857 0 0 0-78.409142 0c0 21.485714 17.554286 39.058286 39.04 39.058286z m-155.227428 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z" p-id="7329"></path></svg>
|
||||
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@ -1056,7 +1056,9 @@ export default {
|
||||
total_pos_top: 'Top',
|
||||
total_pos_bottom: 'Bottom',
|
||||
total_pos_left: 'Left',
|
||||
total_pos_right: 'Right'
|
||||
total_pos_right: 'Right',
|
||||
chart_label: 'Label',
|
||||
drag_block_label: 'Label'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
||||
@ -1056,7 +1056,9 @@ export default {
|
||||
total_pos_top: '頂部',
|
||||
total_pos_bottom: '底部',
|
||||
total_pos_left: '左側',
|
||||
total_pos_right: '右側'
|
||||
total_pos_right: '右側',
|
||||
chart_label: '文本卡',
|
||||
drag_block_label: '標簽'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
|
||||
|
||||
@ -1059,7 +1059,9 @@ export default {
|
||||
total_pos_top: '顶部',
|
||||
total_pos_bottom: '底部',
|
||||
total_pos_left: '左侧',
|
||||
total_pos_right: '右侧'
|
||||
total_pos_right: '右侧',
|
||||
chart_label: '文本卡',
|
||||
drag_block_label: '标签'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页，默认抽取第一个',
|
||||
|
||||
@ -50,6 +50,13 @@ export const TYPE_CONFIGS = [
|
||||
icon: 'table-pivot'
|
||||
},
|
||||
|
||||
{
|
||||
render: 'antv',
|
||||
category: 'chart.chart_type_quota',
|
||||
value: 'label',
|
||||
title: 'chart.chart_label',
|
||||
icon: 'label'
|
||||
},
|
||||
{
|
||||
render: 'antv',
|
||||
category: 'chart.chart_type_quota',
|
||||
@ -189,6 +196,13 @@ export const TYPE_CONFIGS = [
|
||||
icon: 'table-info'
|
||||
},
|
||||
|
||||
{
|
||||
render: 'echarts',
|
||||
category: 'chart.chart_type_quota',
|
||||
value: 'label',
|
||||
title: 'chart.chart_label',
|
||||
icon: 'label'
|
||||
},
|
||||
{
|
||||
render: 'echarts',
|
||||
category: 'chart.chart_type_quota',
|
||||
|
||||
180
frontend/src/views/chart/components/normal/LabelNormalText.vue
Normal file
180
frontend/src/views/chart/components/normal/LabelNormalText.vue
Normal file
@ -0,0 +1,180 @@
|
||||
<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
|
||||
v-if="chart.data && chart.data.datas && chart.data.datas.length > 0"
|
||||
id="label-content"
|
||||
:style="content_class"
|
||||
>
|
||||
<span :style="label_class">
|
||||
<p :style="label_content_class">
|
||||
{{ chart.data.datas[0].name }}
|
||||
</p>
|
||||
</span>
|
||||
<!-- 字段名暂时隐藏-->
|
||||
<!-- <span v-if="dimensionShow" :style="label_space">-->
|
||||
<!-- <p :style="label_class">-->
|
||||
<!-- {{ chart.data.datas[0].category }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </span>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hexColorToRGBA } from '../../chart/util'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
|
||||
export default {
|
||||
name: 'LabelNormalText',
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 'auto',
|
||||
splitHeight: '10px',
|
||||
dimensionShow: true,
|
||||
quotaShow: true,
|
||||
title_class: {
|
||||
margin: '0 0',
|
||||
width: '100%',
|
||||
fontSize: '18px',
|
||||
color: '#303133',
|
||||
textAlign: 'left',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
content_class: {
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 'auto'
|
||||
},
|
||||
label_class: {
|
||||
margin: 0
|
||||
},
|
||||
label_content_class: {
|
||||
margin: 0
|
||||
},
|
||||
label_space: {
|
||||
marginTop: '10px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
bg_class: {
|
||||
background: hexColorToRGBA('#ffffff', 0)
|
||||
},
|
||||
title_show: true,
|
||||
borderRadius: '0px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// bg_class() {
|
||||
// return {
|
||||
// background: hexColorToRGBA('#ffffff', 0),
|
||||
// borderRadius: this.borderRadius
|
||||
// }
|
||||
// }
|
||||
},
|
||||
watch: {
|
||||
chart() {
|
||||
this.init()
|
||||
this.calcHeight()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.calcHeight()
|
||||
// 监听元素变动事件
|
||||
eventBus.$on('resizing', (componentId) => {
|
||||
this.chartResize()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const that = this
|
||||
this.initStyle()
|
||||
window.onresize = function() {
|
||||
that.calcHeight()
|
||||
}
|
||||
this.setBackGroundBorder()
|
||||
},
|
||||
setBackGroundBorder() {
|
||||
if (this.chart.customStyle) {
|
||||
const customStyle = JSON.parse(this.chart.customStyle)
|
||||
if (customStyle.background) {
|
||||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||||
this.bg_class.borderRadius = this.borderRadius
|
||||
}
|
||||
}
|
||||
},
|
||||
calcHeight() {
|
||||
const that = this
|
||||
this.$nextTick(function() {
|
||||
if (that.$refs.tableContainer) {
|
||||
const currentHeight = that.$refs.tableContainer.offsetHeight
|
||||
const contentHeight = currentHeight - that.$refs.title.offsetHeight - 16
|
||||
that.height = contentHeight + 'px'
|
||||
that.content_class.height = that.height
|
||||
}
|
||||
})
|
||||
},
|
||||
initStyle() {
|
||||
if (this.chart.customAttr) {
|
||||
const customAttr = JSON.parse(this.chart.customAttr)
|
||||
if (customAttr.color) {
|
||||
this.label_class.color = customAttr.color.dimensionColor
|
||||
this.label_content_class.color = customAttr.color.quotaColor
|
||||
}
|
||||
if (customAttr.size) {
|
||||
this.dimensionShow = customAttr.size.dimensionShow
|
||||
this.quotaShow = customAttr.size.quotaShow
|
||||
this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
|
||||
this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
|
||||
if (!this.dimensionShow) {
|
||||
this.label_space.marginTop = '0px'
|
||||
} else {
|
||||
this.label_space.marginTop = customAttr.size.spaceSplit + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.chart.customStyle) {
|
||||
const customStyle = JSON.parse(this.chart.customStyle)
|
||||
if (customStyle.text) {
|
||||
this.title_show = customStyle.text.show
|
||||
this.title_class.fontSize = customStyle.text.fontSize + 'px'
|
||||
this.title_class.color = customStyle.text.color
|
||||
this.title_class.textAlign = customStyle.text.hPosition
|
||||
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
|
||||
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
|
||||
}
|
||||
if (customStyle.background) {
|
||||
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||
}
|
||||
}
|
||||
},
|
||||
chartResize() {
|
||||
// 指定图表的配置项和数据
|
||||
this.calcHeight()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-class>>>.body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="400"
|
||||
@ -45,7 +45,7 @@
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
|
||||
@ -71,7 +71,7 @@
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :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="changeColorCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -127,21 +127,21 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.space_split')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -153,21 +153,21 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.space_split')" class="form-item">
|
||||
<el-form-item v-show="chart.type && (chart.type.includes('text'))" :label="$t('chart.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -311,6 +311,7 @@
|
||||
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('treemap')">{{ $t('chart.drag_block_treemap_label') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'word-cloud'">{{ $t('chart.drag_block_word_cloud_label') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
|
||||
/
|
||||
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
|
||||
<span
|
||||
@ -347,7 +348,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
<!--yaxis-->
|
||||
<el-row v-if="view.type !=='table-info'" class="padding-lr" style="margin-top: 6px;">
|
||||
<el-row v-if="view.type !=='table-info' && view.type !=='label'" class="padding-lr" style="margin-top: 6px;">
|
||||
<span style="width: 80px;text-align: right;">
|
||||
<span v-if="view.type && view.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
|
||||
<span
|
||||
@ -555,7 +556,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row
|
||||
v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot'"
|
||||
v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot' && view.type !=='label'"
|
||||
class="padding-lr"
|
||||
style="margin-top: 6px;"
|
||||
>
|
||||
@ -656,7 +657,7 @@
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud'"
|
||||
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
|
||||
name="label"
|
||||
:title="$t('chart.label')"
|
||||
>
|
||||
@ -676,7 +677,7 @@
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge'"
|
||||
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
|
||||
name="tooltip"
|
||||
:title="$t('chart.tooltip')"
|
||||
>
|
||||
@ -809,7 +810,7 @@
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
|
||||
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
|
||||
name="legend"
|
||||
:title="$t('chart.legend')"
|
||||
>
|
||||
@ -841,7 +842,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 360px;">
|
||||
<el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 300px;">
|
||||
<el-row class="view-panel">
|
||||
<div
|
||||
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
|
||||
@ -886,7 +887,7 @@
|
||||
class="chart-class"
|
||||
/>
|
||||
<chart-component
|
||||
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'"
|
||||
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'echarts'"
|
||||
ref="dynamicChart"
|
||||
:chart-id="chart.id"
|
||||
:chart="chart"
|
||||
@ -894,7 +895,7 @@
|
||||
@onChartClick="chartClick"
|
||||
/>
|
||||
<chart-component-g2
|
||||
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
|
||||
v-else-if="httpRequest.status && chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
|
||||
ref="dynamicChart"
|
||||
:chart-id="chart.id"
|
||||
:chart="chart"
|
||||
@ -902,7 +903,7 @@
|
||||
@onChartClick="chartClick"
|
||||
/>
|
||||
<chart-component-s2
|
||||
v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
|
||||
v-else-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label' && renderComponent() === 'antv'"
|
||||
ref="dynamicChart"
|
||||
:chart-id="chart.id"
|
||||
:chart="chart"
|
||||
@ -920,6 +921,11 @@
|
||||
:chart="chart"
|
||||
class="table-class"
|
||||
/>
|
||||
<label-normal-text
|
||||
v-else-if="httpRequest.status && chart.type && chart.type === 'label'"
|
||||
:chart="chart"
|
||||
class="table-class"
|
||||
/>
|
||||
<div v-if="!httpRequest.status" class="chart-error-class">
|
||||
<div
|
||||
style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;"
|
||||
@ -1131,9 +1137,11 @@ import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
|
||||
import AssistLine from '@/views/chart/components/senior/AssistLine'
|
||||
import Threshold from '@/views/chart/components/senior/Threshold'
|
||||
import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
|
||||
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
LabelNormalText,
|
||||
TotalCfg,
|
||||
Threshold,
|
||||
AssistLine,
|
||||
@ -2548,7 +2556,7 @@ export default {
|
||||
|
||||
.tab-header > > > .el-tabs__item {
|
||||
font-size: 12px;
|
||||
padding: 0 60px !important;
|
||||
padding: 0 40px !important;
|
||||
}
|
||||
|
||||
.blackTheme .tab-header > > > .el-tabs__item {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user