forked from github/dataease
Merge branch 'dev' of github.com:dataease/dataease into dev
This commit is contained in:
taojinlong
commit
5490dd15bb
@ -9,7 +9,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
|
||||
<el-checkbox size="medium" @change="multiplexingCheck" />
|
||||
<el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -41,6 +41,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
multiplexingCheckModel: false,
|
||||
componentType: null,
|
||||
linkageActiveStatus: false,
|
||||
editFilter: [
|
||||
@ -67,6 +68,10 @@ export default {
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
if (this.showPosition === 'multiplexing-view') {
|
||||
this.multiplexingCheckModel = true
|
||||
this.multiplexingCheck(this.multiplexingCheckModel)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
@ -86,7 +91,7 @@ export default {
|
||||
this.$emit('showViewDetails')
|
||||
},
|
||||
positionCheck(position) {
|
||||
return this.showPosition === position
|
||||
return this.showPosition.includes(position)
|
||||
},
|
||||
multiplexingCheck(val) {
|
||||
if (val) {
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -233,7 +233,7 @@ export default {
|
||||
}
|
||||
},
|
||||
editBarViewShowFlag() {
|
||||
return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition === 'multiplexing'
|
||||
return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition.includes('multiplexing')
|
||||
},
|
||||
charViewShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
v-if="selectedPanel"
|
||||
:component-data="componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:show-position="'multiplexing'"
|
||||
:show-position="showPosition"
|
||||
/>
|
||||
<el-col v-else style="height: 100%;">
|
||||
<el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
|
||||
@ -45,6 +45,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPosition: 'multiplexing',
|
||||
activeName: 'PanelList',
|
||||
viewLoading: false,
|
||||
panelLoading: false,
|
||||
@ -60,21 +61,25 @@ export default {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('initCurMultiplexingComponents')
|
||||
},
|
||||
methods: {
|
||||
showDetails(params) {
|
||||
this.$store.commit('initCurMultiplexingComponents')
|
||||
const _this = this
|
||||
_this.selectedPanel = params
|
||||
if (params.showType === 'panel') {
|
||||
this.panelLoading = true
|
||||
_this.showPosition = 'multiplexing'
|
||||
_this.panelLoading = true
|
||||
findOne(params.showId).then(response => {
|
||||
this.panelLoading = false
|
||||
_this.panelLoading = false
|
||||
panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), function(rsp) {
|
||||
_this.componentData = rsp.componentData
|
||||
_this.canvasStyleData = rsp.componentStyle
|
||||
})
|
||||
})
|
||||
} else if (params.showType === 'view') {
|
||||
_this.showPosition = 'multiplexing-view'
|
||||
_this.componentData = []
|
||||
const componentId = uuid.v1()
|
||||
_this.canvasStyleData = deepCopy(DEFAULT_COMMON_CANVAS_STYLE_STRING)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user