forked from github/dataease
Merge pull request #2307 from dataeaseShu/pr@dev_feat_filter_position_text
feat(textattr+deoutwidet): 【仪表板】筛选框文字支持排列设置（靠上、居中等）
This commit is contained in:
dataeaseShu
GitHub
commit
c7133be62d
@ -153,7 +153,7 @@
|
||||
|
||||
<div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
|
||||
<el-tooltip content="标题位置">
|
||||
<title-postion :style-info="styleInfo" />
|
||||
<title-postion :show-vertical="showVertical" :style-info="styleInfo" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!--tab 内部组件样式-->
|
||||
@ -181,7 +181,6 @@
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
|
||||
import VideoLinks from '@/components/canvas/components/Editor/VideoLinks'
|
||||
import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks'
|
||||
import DateFormat from '@/components/canvas/components/Editor/DateFormat'
|
||||
@ -189,7 +188,7 @@ import { COLOR_PANEL } from '@/views/chart/chart/chart'
|
||||
import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
|
||||
|
||||
export default {
|
||||
components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks, StreamMediaLinks },
|
||||
components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
|
||||
props: {
|
||||
scrollLeft: {
|
||||
type: Number,
|
||||
@ -356,6 +355,9 @@ export default {
|
||||
canvasWidth() {
|
||||
return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
|
||||
},
|
||||
showVertical() {
|
||||
return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName)
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div ref="myContainer" class="my-container">
|
||||
<div ref="conditionMain" class="condition-main" :class="mainClass">
|
||||
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
|
||||
<div ref="conditionMain" :style="outsideStyle" class="condition-main">
|
||||
<div v-if="element.options.attrs.title" ref="deTitleContainer" :style="titleStyle" class="condition-title">
|
||||
<div class="condition-title-absolute">
|
||||
<div class="first-title">
|
||||
<div class="span-container">
|
||||
@ -13,6 +13,7 @@
|
||||
<div
|
||||
ref="deContentContainer"
|
||||
class="condition-content"
|
||||
:style="titleStyle"
|
||||
:class="element.options.attrs.title ? '' : 'condition-content-default'"
|
||||
>
|
||||
<div class="condition-content-container">
|
||||
@ -43,7 +44,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'DeOutWidget',
|
||||
@ -81,7 +81,9 @@ export default {
|
||||
showNumber: false,
|
||||
mainClass: '',
|
||||
mainHeight: 75,
|
||||
duHeight: 46
|
||||
duHeight: 46,
|
||||
titleStyle: null,
|
||||
outsideStyle: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -101,61 +103,43 @@ export default {
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
element: {
|
||||
handler() {
|
||||
this.watchSize()
|
||||
'element.style': {
|
||||
handler(val) {
|
||||
this.handlerPositionChange(val)
|
||||
},
|
||||
deep: true
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.watchSize()
|
||||
// this.watchSize()
|
||||
},
|
||||
created() {
|
||||
// console.log('aaaaaa')
|
||||
const { horizontal, vertical } = this.element.style
|
||||
this.$set(this.element.style, 'horizontal', horizontal || 'left')
|
||||
this.$set(this.element.style, 'vertical', vertical || 'top')
|
||||
},
|
||||
methods: {
|
||||
|
||||
watchSize() {
|
||||
const erd = elementResizeDetectorMaker()
|
||||
erd.listenTo(this.$refs.myContainer, ele => {
|
||||
const deContentContainer = this.$refs.deContentContainer
|
||||
const height = ele.offsetHeight
|
||||
this.mainHeight = height
|
||||
if (!this.element.options.attrs.title) {
|
||||
this.duHeight = this.mainHeight
|
||||
deContentContainer.style.marginLeft = '0px'
|
||||
return
|
||||
handlerPositionChange(val) {
|
||||
const { horizontal = 'left', vertical = 'top' } = val
|
||||
this.titleStyle = {
|
||||
width: '100%',
|
||||
textAlign: horizontal
|
||||
}
|
||||
this.outsideStyle = {
|
||||
flexWrap: 'wrap'
|
||||
}
|
||||
if (vertical !== 'top') {
|
||||
this.titleStyle = null
|
||||
this.outsideStyle = {
|
||||
flexDirection: horizontal === 'right' ? 'row-reverse' : '',
|
||||
alignItems: 'center'
|
||||
}
|
||||
const titleWidth = this.$refs.deTitle.offsetWidth
|
||||
this.$nextTick(() => {
|
||||
let numRange = 0
|
||||
let min = this.element.style.fontSize * 2 + 30
|
||||
if (this.element.component === 'de-number-range') {
|
||||
min = this.element.style.fontSize * 2 + 55
|
||||
numRange = 25
|
||||
}
|
||||
if (height < min) {
|
||||
this.duHeight = height - numRange
|
||||
this.mainClass = 'condition-main-line'
|
||||
|
||||
if (deContentContainer) {
|
||||
deContentContainer.style.top = '0px'
|
||||
deContentContainer.style.marginLeft = (titleWidth + 15) + 'px'
|
||||
}
|
||||
} else {
|
||||
this.duHeight = height - titleWidth + numRange
|
||||
this.mainClass = ''
|
||||
if (deContentContainer) {
|
||||
deContentContainer.style.top = '2em'
|
||||
deContentContainer.style.marginLeft = '0px'
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -167,7 +151,6 @@ export default {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.ccondition-main {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
@ -175,53 +158,23 @@ export default {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.condition-title {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
height: 2em;
|
||||
cursor: -webkit-grab;
|
||||
line-height: 2em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.first-title {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.condition-title-absolute {
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 4px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.span-container {
|
||||
overflow: hidden auto;
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.condition-content {
|
||||
overflow: auto hidden;
|
||||
top: 2em;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
letter-spacing: 0px !important;
|
||||
}
|
||||
|
||||
.condition-content-container {
|
||||
position: relative;
|
||||
display: table;
|
||||
@ -229,7 +182,6 @@ export default {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.first-element {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
@ -238,34 +190,29 @@ export default {
|
||||
padding: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.first-element-contaner {
|
||||
width: calc(100% - 10px);
|
||||
background: initial;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
margin: 0 4px;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.first-element-grid-contaner {
|
||||
background: #fff;
|
||||
border: 1px solid #d7dae2;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.condition-main-line {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.condition-main {
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.condition-content-default {
|
||||
inset: 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -7,17 +7,16 @@
|
||||
<el-col>
|
||||
<el-form ref="tabsStyleForm" :model="styleInfo" label-width="80px" size="mini" class="demo-form-inline">
|
||||
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="styleInfo.hPosition" size="mini" @change="styleChange">
|
||||
<el-radio-group v-model="styleInfo.horizontal" size="mini">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="styleInfo.vPosition" size="mini" @change="styleChange">
|
||||
<el-form-item v-if="showVertical" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="styleInfo.vertical" size="mini">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
@ -37,25 +36,10 @@ export default {
|
||||
styleInfo: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
defaultPosition: {
|
||||
hPosition: 'left',
|
||||
vPosition: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
styleChange() {
|
||||
this.$store.commit('recordStyleChange')
|
||||
},
|
||||
showVertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user