fix: 修改底弹窗的 时间组件 在高度不够时 向上显示

This commit is contained in:
zhangyu
2022-10-10 10:19:14 +08:00
parent f4b688db1d
commit f6c482c2ec
6 changed files with 39 additions and 8 deletions

View File

@@ -309,6 +309,9 @@
}
}
}
.date-range-panel--top {
top: -460px;
}
.el-date-range-picker.el-picker-panel__body__only,.el-picker-panel__body {
width: 324px;
.el-date-range-picker__header,.el-date-picker__header{

View File

@@ -304,7 +304,7 @@ export default {
this.$emit('closeSubList')
},
listResize (e) {
this.$emit('listResize', e)
this.$emit('listResize', e, this.afterResize)
this.$nextTick(() => { this.afterResize() })
},
changeTab (tab) {
@@ -321,10 +321,20 @@ export default {
this.$refs.reminalLogRecordTab.consoleResize()
}, 600)
}
const subListDom = document.querySelector('.sub-list') // 副列表
console.log(subListDom.style.height, subListDom.offsetHeight)
if (subListDom.offsetHeight < 505) {
this.$store.dispatch('dispatchTimeBoxClass', 'date-range-panel--top')
} else {
this.$store.dispatch('dispatchTimeBoxClass', '')
}
},
getTableData () {
this.$emit('getTableData')
}
},
beforeDestroy () {
this.$store.dispatch('dispatchTimeBoxClass', '')
}
}
</script>

View File

@@ -239,7 +239,7 @@ export const cancelWithChange = {
// 底部上滑框窗口控制
export const bottomBoxWindow = {
// 鼠标拖动二级列表
listResize (vm, e) {
listResize (vm, e, cb) {
window.resizing = true
const mainListDom = document.querySelector('.main-list') // 主列表
const subBoxDom = document.querySelector('.sub-box') // 副列表
@@ -310,6 +310,9 @@ export const bottomBoxWindow = {
document.onmousemove = null
document.onmouseup = null
if (cb) {
cb()
}
}
},
exitFullScreen (vm) {

View File

@@ -214,9 +214,9 @@ export default {
bottomBoxWindow.exitFullScreen(vm)
},
// 鼠标拖动二级列表
listResize (e) {
listResize (e, cb) {
const vm = this
bottomBoxWindow.listResize(vm, e)
bottomBoxWindow.listResize(vm, e, cb)
},
showBottomBox (targetTab, row) {
this.sign = row.id

View File

@@ -31,7 +31,7 @@
</div>
</div>
<transition name="el-zoom-in-top">
<div v-if="dropdownFlag" class="date-range-panel popper-z-index">
<div v-if="dropdownFlag" class="date-range-panel popper-z-index" :class="timeBoxClass">
<el-row class="date-range-panel-top" style="position: relative">
<el-col
:span="16"
@@ -267,6 +267,11 @@ export default {
}
}
},
computed: {
timeBoxClass () {
return this.$store.getters.getTimeBoxClass
}
},
mounted () {
this.getItem()
this.getUtcStr()

View File

@@ -25,7 +25,8 @@ const panel = {
isConnect: 'none',
// 当前鼠标所在的图表id
currentMousemove: 0,
variablesArr: []
variablesArr: [],
timeBoxClass: ''
},
mutations: {
setShowRightBox (state, flag) {
@@ -93,6 +94,9 @@ const panel = {
},
setVariablesArr (state, value) {
state.variablesArr = value
},
setTimeBoxClass (state, value) {
state.timeBoxClass = value
}
},
getters: {
@@ -146,6 +150,9 @@ const panel = {
},
getVariablesArr (state) {
return state.variablesArr
},
getTimeBoxClass (state, value) {
return state.timeBoxClass
}
},
actions: {
@@ -187,6 +194,9 @@ const panel = {
},
dispatchVariablesArr (store, variablesArr) {
store.commit('setVariablesArr', variablesArr)
},
dispatchTimeBoxClass (store, timeBoxClass) {
store.commit('setTimeBoxClass', timeBoxClass)
}
}
}