refactor: 优化仪表板展示边界间隙，保持常有间隙
This commit is contained in:
wangjiahao
parent
70427efba4
commit
9f879a88b4
@ -5,7 +5,7 @@
|
||||
@click="handleClick"
|
||||
@mousedown="elementMouseDown"
|
||||
>
|
||||
<edit-bar v-if="curComponent && config === curComponent" :element="config" @showViewDetails="showViewDetails" />
|
||||
<edit-bar v-if="editBarShow" :element="config" @showViewDetails="showViewDetails" />
|
||||
<de-out-widget
|
||||
v-if="config.type==='custom'"
|
||||
:id="'component' + config.id"
|
||||
@ -15,7 +15,6 @@
|
||||
:element="config"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
|
||||
<component
|
||||
:is="config.component"
|
||||
v-else
|
||||
@ -65,6 +64,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editBarShow() {
|
||||
return this.curComponent && this.config === this.curComponent
|
||||
},
|
||||
curGap() {
|
||||
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
|
||||
},
|
||||
@ -79,7 +81,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getStyle,
|
||||
|
||||
getShapeStyleIntDeDrag(style, prop) {
|
||||
if (prop === 'rotate') {
|
||||
return style['rotate']
|
||||
@ -114,17 +115,11 @@ export default {
|
||||
result[attr] = style[attr] + 'px'
|
||||
})
|
||||
result['rotate'] = style['rotate']
|
||||
// result['opacity'] = style['opacity']
|
||||
|
||||
return result
|
||||
// return style
|
||||
},
|
||||
|
||||
getComponentStyleDefault(style) {
|
||||
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
|
||||
// console.log('styleInfo', JSON.stringify(styleInfo))
|
||||
// return styleInfo
|
||||
// return style
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
@ -151,19 +146,21 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component {
|
||||
.component {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.component:hover {
|
||||
box-shadow:0px 0px 7px #0a7be0;
|
||||
}
|
||||
.gap_class{
|
||||
padding:5px;
|
||||
}
|
||||
.component-custom {
|
||||
outline: none;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
}
|
||||
.component:hover {
|
||||
box-shadow: 0px 0px 7px #0a7be0;
|
||||
}
|
||||
|
||||
.gap_class {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.component-custom {
|
||||
outline: none;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,33 +1,41 @@
|
||||
<template>
|
||||
<div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
|
||||
<div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
|
||||
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
|
||||
{{ $t('panel.panelNull') }}
|
||||
</el-row>
|
||||
<canvas-opt-bar />
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentDataInfo"
|
||||
:key="index"
|
||||
:config="item"
|
||||
:search-count="searchCount"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
<!--视图详情-->
|
||||
<el-dialog
|
||||
:title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
|
||||
:visible.sync="chartDetailsVisible"
|
||||
width="70%"
|
||||
class="dialog-css"
|
||||
:destroy-on-close="true"
|
||||
<div class="bg" :style="customStyle">
|
||||
<div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
|
||||
<div
|
||||
id="canvasInfoTemp"
|
||||
ref="canvasInfoTemp"
|
||||
class="main-class"
|
||||
@mouseup="deselectCurComponent"
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
<span style="position: absolute;right: 70px;top:15px">
|
||||
<el-button size="mini" @click="exportExcel">
|
||||
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
|
||||
{{ $t('chart.export_details') }}
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
</el-dialog>
|
||||
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
|
||||
{{ $t('panel.panelNull') }}
|
||||
</el-row>
|
||||
<canvas-opt-bar />
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentDataInfo"
|
||||
:key="index"
|
||||
:config="item"
|
||||
:search-count="searchCount"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
<!--视图详情-->
|
||||
<el-dialog
|
||||
:title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
|
||||
:visible.sync="chartDetailsVisible"
|
||||
width="70%"
|
||||
class="dialog-css"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<span style="position: absolute;right: 70px;top:15px">
|
||||
<el-button size="mini" @click="exportExcel">
|
||||
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
|
||||
{{ $t('chart.export_details') }}
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -94,9 +102,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
customStyle() {
|
||||
let style = {
|
||||
padding: this.componentGap + 'px'
|
||||
}
|
||||
let style = {}
|
||||
if (this.canvasStyleData.openCommonStyle) {
|
||||
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
|
||||
style = {
|
||||
@ -110,16 +116,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (this.canvasStyleData.selfAdaption) {
|
||||
// style = {
|
||||
// overflow: 'hidden',
|
||||
// ...style
|
||||
// }
|
||||
// }
|
||||
// style = {
|
||||
// overflow-x :'hidden',
|
||||
// ...style
|
||||
// }
|
||||
return style
|
||||
},
|
||||
// 此处单独计算componentData的值 不放入全局mapState中
|
||||
@ -152,17 +148,17 @@ export default {
|
||||
const _this = this
|
||||
const erd = elementResizeDetectorMaker()
|
||||
// 监听div变动事件
|
||||
const tempDom = document.getElementById('canvasInfoMain')
|
||||
erd.listenTo(tempDom, element => {
|
||||
const mainDom = document.getElementById('canvasInfoMain')
|
||||
erd.listenTo(mainDom, element => {
|
||||
_this.$nextTick(() => {
|
||||
_this.restore()
|
||||
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
|
||||
_this.mainHeight = tempDom.scrollHeight + 'px!important'
|
||||
_this.mainHeight = mainDom.scrollHeight + 'px!important'
|
||||
})
|
||||
})
|
||||
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
|
||||
this.$store.commit('clearLinkageSettingInfo', false)
|
||||
this.canvasStyleDataInit()
|
||||
_this.$store.commit('clearLinkageSettingInfo', false)
|
||||
_this.canvasStyleDataInit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
@ -235,8 +231,6 @@ export default {
|
||||
}
|
||||
},
|
||||
handleMouseDown() {
|
||||
// console.log('handleMouseDown123')
|
||||
|
||||
this.$store.commit('setClickComponentStatus', false)
|
||||
}
|
||||
}
|
||||
@ -244,47 +238,45 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
.bg {
|
||||
padding: 5px;
|
||||
min-width: 600px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
/*border: 1px solid #E6E6E6;*/
|
||||
background-size: 100% 100% !important;
|
||||
.canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
.gap_class{
|
||||
padding:5px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.main-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
|
||||
.gap_class {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -1,29 +1,31 @@
|
||||
<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 class="condition-title-absolute">
|
||||
<div class="first-title">
|
||||
<div class="span-container">
|
||||
<span ref="deTitle">{{ element.options.attrs.title }}</span>
|
||||
<div class="outside-container">
|
||||
<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 class="condition-title-absolute">
|
||||
<div class="first-title">
|
||||
<div class="span-container">
|
||||
<span ref="deTitle">{{ element.options.attrs.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
|
||||
<div class="condition-content-container">
|
||||
<div class="first-element">
|
||||
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
|
||||
<component
|
||||
:is="element.component"
|
||||
v-if="element.type==='custom'"
|
||||
:id="'component' + element.id"
|
||||
class="component-custom"
|
||||
:out-style="element.style"
|
||||
:element="element"
|
||||
:in-draw="inDraw"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
|
||||
<div class="condition-content-container">
|
||||
<div class="first-element">
|
||||
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
|
||||
<component
|
||||
:is="element.component"
|
||||
v-if="element.type==='custom'"
|
||||
:id="'component' + element.id"
|
||||
class="component-custom"
|
||||
:out-style="element.style"
|
||||
:element="element"
|
||||
:in-draw="inDraw"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -97,12 +99,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.outside-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.my-container {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
inset: 0px;
|
||||
}
|
||||
.ccondition-main {
|
||||
.condition-main {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
inset: 0px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user