dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 过滤组件可以跟随仪表板缩放

Browse Source
This commit is contained in:
wangjiahao 2021-12-16 17:08:54 +08:00
parent 0a16c91158
commit 732cb32abf
14 changed files with 108 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -6,30 +6,31 @@
@mousedown="elementMouseDown"
>
<edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
<close-bar v-if="previewVisible" @closePreview="closePreview" />
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
class="component-custom"
:style="getComponentStyleDefault(config.style)"
:out-style="config.style"
:element="config"
:in-screen="inScreen"
/>
<component
:is="config.component"
v-else
ref="wrapperChild"
:out-style="config.style"
:style="getComponentStyleDefault(config.style)"
:prop-value="config.propValue"
:is-edit="false"
:active="componentActiveFlag"
:element="config"
:search-count="searchCount"
:h="config.style.height"
:edit-mode="'preview'"
/>
<close-bar v-if="previewVisible" @closePreview="closePreview" />
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
class="component-custom"
:style="getComponentStyleDefault(config.style)"
:out-style="config.style"
:element="config"
:in-screen="inScreen"
:h="config.style.height"
/>
<component
:is="config.component"
v-else
ref="wrapperChild"
:out-style="config.style"
:style="getComponentStyleDefault(config.style)"
:prop-value="config.propValue"
:is-edit="false"
:active="componentActiveFlag"
:element="config"
:search-count="searchCount"
:h="config.style.height"
:edit-mode="'preview'"
/>
</div>
</template>

24
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -37,6 +37,17 @@
</span>
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog>
<!--手机视图详情-->
<el-dialog
:title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
:visible.sync="mobileChartDetailsVisible"
:fullscreen="true"
class="mobile-dialog-css"
:destroy-on-close="true"
>
<UserViewMobileDialog :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog>
</div>
</div>
</div>
@ -53,9 +64,10 @@ import eventBus from '@/components/canvas/utils/eventBus'
import elementResizeDetectorMaker from 'element-resize-detector'
import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
export default {
components: { ComponentWrapper, UserViewDialog, CanvasOptBar },
components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
model: {
prop: 'show',
event: 'change'
@ -103,6 +115,7 @@ export default {
mainHeight: '100%',
searchCount: 0,
chartDetailsVisible: false,
mobileChartDetailsVisible: false,
showChartInfo: {},
showChartTableInfo: {},
// 布局展示 1.pc pc端布局 2.mobile 移动端布局
@ -249,7 +262,11 @@ export default {
openChartDetailsDialog(chartInfo) {
this.showChartInfo = chartInfo.chart
this.showChartTableInfo = chartInfo.tableChart
this.chartDetailsVisible = true
if (this.terminal === 'pc') {
this.chartDetailsVisible = true
} else {
this.mobileChartDetailsVisible
}
},
exportExcel() {
this.$refs['userViewDialog'].exportExcel()
@ -309,6 +326,9 @@ export default {
padding: 10px 20px 20px;
}
.mobile-dialog-css > > > .el-dialog__body {
padding: 0px;
}
::-webkit-scrollbar {
width: 0px!important;
height: 0px!important;

2
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -80,6 +80,7 @@
:element="item"
:out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
:h="getShapeStyleIntDeDrag(item.style,'height')"
/>
<component
:is="item.component"
@ -1567,7 +1568,6 @@ export default {
padding:3px;
}
.ref-line {
position: absolute;
background-color: #70c0ff;;

18
frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<de-container>
<de-main-container v-if="!chart.type.includes('table')" :style="customStyle">
<de-main-container v-if="!chart.type.includes('table')" :style="customStyle" class="full-div">
<chart-component v-if="!chart.type.includes('text') && renderComponent() === 'echarts'" class="chart-class" :chart="chart" />
<chart-component-g2 v-if="!chart.type.includes('text') && renderComponent() === 'antv'" class="chart-class" :chart="chart" />
<label-normal v-if="chart.type.includes('text')" :chart="chart" class="table-class" />
@ -16,14 +16,14 @@
import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from '@/views/chart/components/table/TableNormal'
import LabelNormal from '@/views/chart/components/normal/LabelNormal'
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import { mapState } from 'vuex'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
export default {
name: 'UserViewMobileDialog',
components: { ChartComponentG2, DeMainContainer, DeContainer, ChartComponent, TableNormal, LabelNormal },
components: { DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal },
props: {
chart: {
type: Object,
@ -78,16 +78,8 @@ export default {
</script>
<style lang="scss" scoped>
.ms-aside-container {
height: 50vh;
min-width: 400px;
max-width: 400px;
padding: 0 0;
}
.ms-main-container {
height: 100vh;
border: 1px solid #E6E6E6;
border-left: 0 solid;
border: 0px;
}
.chart-class{
height: 100%;

24
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -23,6 +23,7 @@
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
:size="sizeInfo"
/>
</div>
</div>
@ -49,16 +50,37 @@ export default {
type: Boolean,
required: false,
default: true
},
h: {
type: Number,
default: 50
}
},
data() {
return {
inputMaxSize: 46,
inputLargeSize: 42,
inputSmallSize: 38,
inputMiniSize: 34,
options: null,
showNumber: false,
mainClass: ''
}
},
computed: {
sizeInfo() {
let size
if (this.h > this.inputMaxSize) {
} else if (this.h > this.inputLargeSize) {
size = 'medium'
} else if (this.h > this.inputSmallSize) {
size = 'small'
} else {
size = 'mini'
}
return size
}
},
mounted() {
this.watchSize()
},

4
frontend/src/components/widget/DeWidget/DeButton.vue
View File

@ -4,6 +4,7 @@
v-if="options!== null && options.attrs!==null"
:type="options.attrs.type"
:round="options.attrs.round"
:size="size"
>
{{ options.value }}
</el-button>
@ -20,7 +21,8 @@ export default {
inDraw: {
type: Boolean,
default: true
}
},
size: String
},
data() {
return {

5
frontend/src/components/widget/DeWidget/DeDate.vue
View File

@ -9,8 +9,8 @@
:end-placeholder="$t(options.attrs.endPlaceholder)"
:placeholder="$t(options.attrs.placeholder)"
:append-to-body="inScreen"
style="min-height: 36px;"
value-format="timestamp"
:size="size"
@change="dateChange"
/>
</template>
@ -32,7 +32,8 @@ export default {
type: Boolean,
required: false,
default: true
}
},
size: String
},
data() {
return {

4
frontend/src/components/widget/DeWidget/DeInputSearch.vue
View File

@ -7,6 +7,7 @@
:placeholder="$t(options.attrs.placeholder)"
@keypress.enter.native="search"
@dblclick="setEdit"
:size="size"
>
<el-button slot="append" icon="el-icon-search" @click="search" />
@ -25,7 +26,8 @@ export default {
inDraw: {
type: Boolean,
default: true
}
},
size: String
},
data() {
return {

10
frontend/src/components/widget/DeWidget/DeNumberRange.vue
View File

@ -1,13 +1,13 @@
<template>
<el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
<el-form v-if="options!== null && options.attrs!==null" ref="form" style="max-height:34px" :model="form" :rules="rules">
<div class="de-number-range-container">
<el-form-item prop="min">
<el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" @change="handleMinChange" />
<el-input v-model="form.min" :placeholder="$t(options.attrs.placeholder_min)" :size="size" @change="handleMinChange" />
</el-form-item>
<span>{{ $t('denumberrange.split_placeholder') }}</span>
<el-form-item prop="max">
<el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" @change="handleMaxChange" />
<el-input v-model="form.max" :placeholder="$t(options.attrs.placeholder_max)" :size="size" @change="handleMaxChange" />
</el-form-item>
</div>
</el-form>
@ -27,7 +27,8 @@ export default {
inDraw: {
type: Boolean,
default: true
}
},
size: String
},
data() {
@ -186,6 +187,7 @@ export default {
<style lang="scss" scoped>
.de-number-range-container {
display: inline;
max-height: 40px;
>>>div.el-form-item {
width: calc(50% - 10px) !important;
display: inline-block;

5
frontend/src/components/widget/DeWidget/DeQuarter.vue
View File

@ -2,8 +2,8 @@
<el-quarter
v-if="options!== null && options.attrs!==null"
v-model="options.value"
:placeholder="options.attrs.placeholder"
:size="size"
/>
</template>
@ -18,7 +18,8 @@ export default {
inDraw: {
type: Boolean,
default: true
}
},
size: String
},
data() {
return {

4
frontend/src/components/widget/DeWidget/DeSelect.vue
View File

@ -9,6 +9,7 @@
:multiple="options.attrs.multiple"
:placeholder="$t(options.attrs.placeholder)"
:popper-append-to-body="inScreen"
:size="size"
@change="changeValue"
@focus="setOptionWidth"
>
@ -42,7 +43,8 @@ export default {
type: Boolean,
required: false,
default: true
}
},
size: String
},
data() {
return {

6
frontend/src/components/widget/DeWidget/DeSelectGrid.vue
View File

@ -2,7 +2,7 @@
<div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
<div class="de-select-grid-search">
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable :size="size" />
</div>
<div class="list">
<el-tree
@ -12,6 +12,7 @@
:props="defaultProp"
:indent="0"
class="de-filter-tree"
:size="size"
default-expand-all
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
@ -58,7 +59,8 @@ export default {
type: Boolean,
required: false,
default: true
}
},
size: String
},
data() {
return {

5
frontend/src/components/widget/DeWidget/DeTreeSelect.vue
View File

@ -1,6 +1,6 @@
<template>
<el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
<el-select :size="size" v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" :popper-append-to-body="inScreen" @change="changeValue">
<el-option
v-for="item in options.attrs.datas"
:key="item[options.attrs.key]"
@ -28,7 +28,8 @@ export default {
type: Boolean,
required: false,
default: true
}
},
size: String
},
data() {
return {

5
frontend/src/views/panel/edit/ComponentWaitItem.vue
View File

@ -11,6 +11,7 @@
:style="getComponentStyleDefault(config.style)"
:out-style="outStyle"
:element="config"
:in-screen="true"
/>
<component
:is="config.component"
@ -30,10 +31,11 @@
import { mapState } from 'vuex'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
import { getStyle } from '@/components/canvas/utils/style'
import DeOutWidget from '@/components/dataease/DeOutWidget'
export default {
name: 'ComponentWaitItem',
components: { MobileCheckBar },
components: { DeOutWidget, MobileCheckBar },
props: {
config: {
type: Object,
@ -87,6 +89,7 @@ export default {
<style scoped>
.component-custom {
position: relative!important;
outline: none;
width: 100% !important;
height: 100%;