forked from github/dataease
perf(系统管理): 定时报告发送视图数据页面优化
This commit is contained in:
fit2cloud-chenyw
parent
bfacd16d08
commit
1272119cbb
238
frontend/src/components/DeViewSelect/index.bak.vue
Normal file
238
frontend/src/components/DeViewSelect/index.bak.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="el-view-select" :class="selectClass">
|
||||
<el-select
|
||||
ref="select"
|
||||
v-model="innerValues"
|
||||
v-popover:popover
|
||||
popper-class="view-select-option"
|
||||
style="width: 100%;"
|
||||
multiple
|
||||
clearable
|
||||
@remove-tag="_selectRemoveTag"
|
||||
@clear="_selectClearFun"
|
||||
@focus="_popoverShowFun"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
|
||||
<el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
|
||||
<div :style="{'height': panelHeight + 'px'}">
|
||||
<Preview
|
||||
:component-data="componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:panel-info="panelInfo"
|
||||
:show-position="showPosition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</el-scrollbar>
|
||||
<el-empty v-else style="height: 150px;" :image-size="120" description="" />
|
||||
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { on, off } from './dom'
|
||||
import Preview from '@/components/canvas/components/Editor/Preview'
|
||||
import { findOne } from '@/api/panel/panel'
|
||||
import { viewOptions } from '@/api/chart/chart'
|
||||
import { panelDataPrepare } from '@/components/canvas/utils/utils'
|
||||
export default {
|
||||
name: 'DeViewSelect',
|
||||
components: { Preview },
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
panelId: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
placement: 'bottom',
|
||||
transition: 'el-zoom-in-top',
|
||||
width: 500,
|
||||
selectClass: 'my-top-class',
|
||||
innerValues: [],
|
||||
panelHeight: 450,
|
||||
showPosition: 'email-task',
|
||||
viewLoaded: false,
|
||||
selectOptions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
popperClass() {
|
||||
const _c = 'el-view-select-popper ' + this.popoverClass
|
||||
return this.disabled ? _c + ' disabled ' : _c
|
||||
},
|
||||
selectedViews() {
|
||||
return this.$store.getters.panelViews[this.panelId]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val, old) {
|
||||
this.innerValues = val
|
||||
},
|
||||
innerValues(val, old) {
|
||||
if (val !== old) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
panelId(val, old) {
|
||||
if (val !== old) {
|
||||
this.innerValues = []
|
||||
this.loadView()
|
||||
}
|
||||
},
|
||||
selectedViews: {
|
||||
handler(val) {
|
||||
if (!val || !JSON.stringify(val)) {
|
||||
this.innerValues = []
|
||||
return
|
||||
}
|
||||
const viewIds = JSON.parse(JSON.stringify(val))
|
||||
|
||||
this.innerValues = JSON.parse(JSON.stringify(viewIds))
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this._updateH()
|
||||
this.$nextTick(() => {
|
||||
on(document, 'mouseup', this._popoverHideFun)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this._selectClearFun()
|
||||
off(document, 'mouseup', this._popoverHideFun)
|
||||
},
|
||||
created() {
|
||||
this.loadView()
|
||||
},
|
||||
methods: {
|
||||
loadView() {
|
||||
this._selectClearFun()
|
||||
this.innerValues = this.value
|
||||
this.viewLoaded = false
|
||||
this.panelId && findOne(this.panelId).then(response => {
|
||||
this.panelInfo = {
|
||||
id: response.data.id,
|
||||
name: response.data.name,
|
||||
privileges: response.data.privileges,
|
||||
sourcePanelName: response.data.sourcePanelName,
|
||||
status: response.data.status
|
||||
}
|
||||
this.$store.dispatch('panel/setPanelInfo', this.panelInfo)
|
||||
panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => {
|
||||
this.viewLoaded = true
|
||||
this.componentData = rsp.componentData
|
||||
this.canvasStyleData = rsp.componentStyle
|
||||
this.loadOptions()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
loadOptions() {
|
||||
this.panelId && viewOptions(this.panelId).then(res => {
|
||||
this.selectOptions = res.data
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
_updateH() {
|
||||
this.$nextTick(() => {
|
||||
this.width = this.$refs.select.$el.getBoundingClientRect().width
|
||||
this.panelHeight = this.width * 9 / 16
|
||||
})
|
||||
},
|
||||
_popoverShowFun(val) {
|
||||
this._updateH()
|
||||
this.$emit('onFoucs')
|
||||
},
|
||||
_popoverHideFun(e) {
|
||||
const path = this._getEventPath(e)
|
||||
const isInside = path.some(list => {
|
||||
return list.className && typeof list.className === 'string' && list.className.indexOf('el-view-select') !== -1
|
||||
})
|
||||
if (!isInside) {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
_getEventPath(evt) {
|
||||
const path = (evt.composedPath && evt.composedPath()) || evt.path
|
||||
const target = evt.target
|
||||
if (path != null) {
|
||||
return path.indexOf(window) < 0 ? path.concat(window) : path
|
||||
}
|
||||
if (target === window) {
|
||||
return [window]
|
||||
}
|
||||
function getParents(node, memo) {
|
||||
memo = memo || []
|
||||
const parentNode = node.parentNode
|
||||
if (!parentNode) {
|
||||
return memo
|
||||
} else {
|
||||
return getParents(parentNode, memo.concat(parentNode))
|
||||
}
|
||||
}
|
||||
return [target].concat(getParents(target), window)
|
||||
},
|
||||
_selectRemoveTag(viewId) {
|
||||
this.selectedViews.forEach(item => {
|
||||
if (item.viewId === viewId) {
|
||||
this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item.viewId })
|
||||
}
|
||||
})
|
||||
},
|
||||
_selectClearFun() {
|
||||
this.$store.dispatch('task/delPanelViews', this.panelId)
|
||||
},
|
||||
init() {
|
||||
if (this.value && this.value.length) {
|
||||
const viewIds = JSON.parse(JSON.stringify(this.value))
|
||||
this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-view-select .view-select-option {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-view-select-popper {
|
||||
max-height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-view-select-popper.disabled {
|
||||
display: none !important;
|
||||
}
|
||||
.el-view-select-popper .el-button--small {
|
||||
width: 25px !important;
|
||||
min-width: 25px !important;
|
||||
}
|
||||
|
||||
.el-view-select-popper[x-placement^='bottom'] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.my-top-class {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,6 @@
|
||||
<el-select
|
||||
ref="select"
|
||||
v-model="innerValues"
|
||||
v-popover:popover
|
||||
popper-class="view-select-option"
|
||||
style="width: 100%;"
|
||||
multiple
|
||||
@ -20,26 +19,38 @@
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
|
||||
<el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
|
||||
<div :style="{'height': panelHeight + 'px'}">
|
||||
<Preview
|
||||
:component-data="componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:panel-info="panelInfo"
|
||||
:show-position="showPosition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</el-scrollbar>
|
||||
<el-empty v-else style="height: 150px;" :image-size="120" description="" />
|
||||
|
||||
</el-popover>
|
||||
|
||||
<el-dialog
|
||||
:visible="dialogShow"
|
||||
:show-close="false"
|
||||
class="dialog-css"
|
||||
:fullscreen="true"
|
||||
>
|
||||
<div ref="contaninerDiv" :style="{'height': panelHeight + 'px'}" v-if="dialogShow && viewLoaded">
|
||||
<Preview
|
||||
:component-data="componentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:panel-info="panelInfo"
|
||||
:show-position="showPosition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div slot="title" class="dialog-footer title-text">
|
||||
<span style="font-size: 14px;">
|
||||
选择视图
|
||||
</span>
|
||||
<span style="float: right;">
|
||||
<el-button type="primary" size="mini" @click="closeDialog()">{{ $t('commons.confirm') }}</el-button>
|
||||
<el-button size="mini" @click="cancelDialog()">{{ $t('commons.cancel') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { on, off } from './dom'
|
||||
import Preview from '@/components/canvas/components/Editor/Preview'
|
||||
import { findOne } from '@/api/panel/panel'
|
||||
import { viewOptions } from '@/api/chart/chart'
|
||||
@ -69,7 +80,9 @@ export default {
|
||||
panelHeight: 450,
|
||||
showPosition: 'email-task',
|
||||
viewLoaded: false,
|
||||
selectOptions: []
|
||||
selectOptions: [],
|
||||
dialogShow: false,
|
||||
idsBeforeOpen: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -111,13 +124,11 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this._updateH()
|
||||
this.$nextTick(() => {
|
||||
on(document, 'mouseup', this._popoverHideFun)
|
||||
})
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
this._selectClearFun()
|
||||
off(document, 'mouseup', this._popoverHideFun)
|
||||
|
||||
},
|
||||
created() {
|
||||
this.loadView()
|
||||
@ -153,47 +164,24 @@ export default {
|
||||
},
|
||||
_updateH() {
|
||||
this.$nextTick(() => {
|
||||
this.width = this.$refs.select.$el.getBoundingClientRect().width
|
||||
this.panelHeight = this.width * 9 / 16
|
||||
if(this.$refs.contaninerDiv) {
|
||||
this.width = this.$refs.contaninerDiv.clientWidth
|
||||
this.panelHeight = this.width * 9 / 16
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
_popoverShowFun(val) {
|
||||
this.openDialog()
|
||||
this._updateH()
|
||||
this.$emit('onFoucs')
|
||||
},
|
||||
_popoverHideFun(e) {
|
||||
const path = this._getEventPath(e)
|
||||
const isInside = path.some(list => {
|
||||
return list.className && typeof list.className === 'string' && list.className.indexOf('el-view-select') !== -1
|
||||
})
|
||||
if (!isInside) {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
_getEventPath(evt) {
|
||||
const path = (evt.composedPath && evt.composedPath()) || evt.path
|
||||
const target = evt.target
|
||||
if (path != null) {
|
||||
return path.indexOf(window) < 0 ? path.concat(window) : path
|
||||
}
|
||||
if (target === window) {
|
||||
return [window]
|
||||
}
|
||||
function getParents(node, memo) {
|
||||
memo = memo || []
|
||||
const parentNode = node.parentNode
|
||||
if (!parentNode) {
|
||||
return memo
|
||||
} else {
|
||||
return getParents(parentNode, memo.concat(parentNode))
|
||||
}
|
||||
}
|
||||
return [target].concat(getParents(target), window)
|
||||
},
|
||||
|
||||
|
||||
_selectRemoveTag(viewId) {
|
||||
this.selectedViews.forEach(item => {
|
||||
if (item.viewId === viewId) {
|
||||
this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item.viewId })
|
||||
if (item === viewId) {
|
||||
this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item })
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -205,6 +193,21 @@ export default {
|
||||
const viewIds = JSON.parse(JSON.stringify(this.value))
|
||||
this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
|
||||
}
|
||||
},
|
||||
openDialog() {
|
||||
if (this.value && this.value.length) {
|
||||
this.idsBeforeOpen = JSON.parse(JSON.stringify(this.value))
|
||||
}
|
||||
this.dialogShow = true
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogShow = false
|
||||
},
|
||||
cancelDialog() {
|
||||
this.innerValues = JSON.parse(JSON.stringify(this.idsBeforeOpen))
|
||||
const viewIds = JSON.parse(JSON.stringify(this.innerValues))
|
||||
this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
|
||||
this.closeDialog()
|
||||
}
|
||||
}
|
||||
|
||||
@ -216,23 +219,18 @@ export default {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-view-select-popper {
|
||||
max-height: 800px;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-view-select-popper.disabled {
|
||||
display: none !important;
|
||||
}
|
||||
.el-view-select-popper .el-button--small {
|
||||
width: 25px !important;
|
||||
min-width: 25px !important;
|
||||
}
|
||||
|
||||
.el-view-select-popper[x-placement^='bottom'] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.my-top-class {
|
||||
width: 100%;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -227,6 +227,7 @@ export default {
|
||||
},
|
||||
|
||||
resultFormat() {
|
||||
if(!this.chart.data)return
|
||||
const value = this.chart.data.series[0].data[0]
|
||||
let yAxis = []
|
||||
try {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user