You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
11 KiB
Vue
351 lines
11 KiB
Vue
<template>
|
|
<div style="height: 100%;width: 100%">
|
|
<div ref="con" class="con">
|
|
<div class="separate" draggable="true" :style="`top: ${tree.separate}%;display:${viewFlag?'none':'block'}`"
|
|
ref="separate"></div>
|
|
<div class="area" ref="area1" :style="`height:${tree.separate}%`">
|
|
<component v-if="typeof tree.top === 'string' " :is="tree.top" :tree="tree.topChildren" :styleData="styleData"
|
|
:viewFlag="viewFlag"></component>
|
|
<component v-if="(tree.top||{}).type" :is="componentsEnum[tree.top.type]" :styleData="styleData"
|
|
:defaultData="tree.top.data"></component>
|
|
</div>
|
|
<div class="area" ref="area2" :style="`height:${100-tree.separate}%;top:${tree.separate}%`">
|
|
<component v-if="typeof tree.down === 'string' " :is="tree.down" :tree="tree.downChildren"
|
|
:styleData="styleData"
|
|
:viewFlag="viewFlag"></component>
|
|
<component v-if="(tree.down||{}).type" :is="componentsEnum[tree.down.type]" :styleData="styleData"
|
|
:defaultData="tree.down.data"></component>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
title="分割方式"
|
|
:visible.sync="dialogVisible"
|
|
:append-to-body="true"
|
|
width="30%">
|
|
<el-button type="primary" @click="leftRight">左右</el-button>
|
|
<el-button type="primary" @click="upDown">上下</el-button>
|
|
<el-button type="primary" @click="clearCut">取消</el-button>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
title="选择组件"
|
|
:visible.sync="componentsDialogVisible"
|
|
:append-to-body="true"
|
|
width="60%">
|
|
<ComponentsDialogContent @SelectComponentsCB="SelectComponentsCB"/>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="clearCom">清 除</el-button>
|
|
</span>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="componentsDialogVisible = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
title="图表配置"
|
|
:append-to-body="true"
|
|
:visible.sync="componentsDialog"
|
|
width="96%"
|
|
class="dialog1"
|
|
:fullscreen="true"
|
|
:before-close="closeComponentsDialog">
|
|
<ChartModelLineInfo
|
|
@close="closeComponentsDialog"
|
|
@ok="modelOptionOk"
|
|
v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='lineChart' &&componentsDialogData.serveType === 'line'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<ChartModelBarInfo
|
|
@close="closeComponentsDialog"
|
|
@ok="modelOptionOk"
|
|
v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart' &&componentsDialogData.serveType === 'bar'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<ChartModelBarInfo1
|
|
@close="closeComponentsDialog"
|
|
@ok="modelOptionOk"
|
|
v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='barChart1' &&componentsDialogData.serveType === 'bar'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<ChartModelPieInfo
|
|
@close="closeComponentsDialog"
|
|
@ok="modelOptionOk"
|
|
v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='pieChart' &&componentsDialogData.serveType === 'pie'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<ScrollTableModelInfo
|
|
@close="closeComponentsDialog"
|
|
@ok="modelOptionOk"
|
|
v-if="(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='scrollTable'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<ChartInfo
|
|
v-if="!(componentsDialogData||{}).isModel && (componentsDialogData && componentsDialogData.type)==='chart'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<TableInfo v-if="(componentsDialogData && componentsDialogData.type)==='table'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
<TextInfo v-if="(componentsDialogData && componentsDialogData.type)==='text'"
|
|
:defaultData="componentsDialogData&&componentsDialogData.data" :style-data="styleData"
|
|
:isDialog="true"
|
|
:key="'chartDialog' + dialogKey"/>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {
|
|
ComplexTable,
|
|
ComplexChart,
|
|
ComplexForm,
|
|
ComplexMap,
|
|
ComplexScrollTable,
|
|
ComplexText
|
|
} from "@/components/complex";
|
|
|
|
import ChartInfo from '@/views/createChart/index'
|
|
import TableInfo from '@/views/createTable/index'
|
|
import TextInfo from '@/views/basicCom/createText/index'
|
|
|
|
import ChartModelLineInfo from '@/components/modelComponents/line/line'
|
|
import ChartModelBarInfo from '@/components/modelComponents/bar/bar'
|
|
import ChartModelPieInfo from '@/components/modelComponents/pie/pie'
|
|
import ScrollTableModelInfo from '@/components/modelComponents/srcollTable/srcollTable'
|
|
|
|
import ScrollView from '@/components/view/scrollTable'
|
|
import lineView from '@/components/view/line'
|
|
import barView from '@/components/view/bar'
|
|
import pieView from '@/components/view/pie'
|
|
|
|
export default {
|
|
name: 'UpDown',
|
|
components: {
|
|
LeftRight: () => import('./leftRightStr'),
|
|
ComponentsDialogContent: () => import('./componentsDialog'),
|
|
ComplexTable,
|
|
ComplexChart,
|
|
ComplexForm,
|
|
ComplexMap,
|
|
ComplexText,
|
|
ComplexScrollTable,
|
|
ChartInfo,
|
|
TableInfo,
|
|
TextInfo,
|
|
ChartModelLineInfo,
|
|
ChartModelBarInfo,
|
|
ChartModelPieInfo,
|
|
ScrollTableModelInfo,
|
|
ScrollView,
|
|
lineView,
|
|
barView,
|
|
pieView
|
|
},
|
|
props: ['tree', 'viewFlag', 'styleData'],
|
|
data() {
|
|
return {
|
|
componentsEnum: {
|
|
table: 'ComplexTable',
|
|
chart: 'ComplexChart',
|
|
form: 'ComplexForm',
|
|
map: 'ComplexMap',
|
|
text: 'ComplexText',
|
|
lineChart: 'lineView',
|
|
barChart: 'barView',
|
|
barChart1: 'barView',
|
|
pieChart: 'pieView',
|
|
scrollTable: 'ScrollView',
|
|
},
|
|
height: 0,
|
|
distance: 0,
|
|
dialogVisible: false,
|
|
componentsDialogVisible: false,
|
|
type: '',
|
|
componentsDialog: false,
|
|
componentsDialogData: null,
|
|
dialogKey: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
let area1 = this.$refs.area1
|
|
area1.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
if (!this.tree.top) {
|
|
this.dialogVisible = true
|
|
this.type = 'top'
|
|
} else {
|
|
this.dialogKey += 1
|
|
this.componentsDialogData = this.tree.top
|
|
this.componentsDialog = true
|
|
}
|
|
})
|
|
area1.addEventListener('dblclick', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
// if (!this.tree.top) {
|
|
this.componentsDialogVisible = true
|
|
this.type = 'top'
|
|
// }
|
|
})
|
|
|
|
let area2 = this.$refs.area2
|
|
area2.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
if (!this.tree.down) {
|
|
this.dialogVisible = true
|
|
this.type = 'down'
|
|
} else {
|
|
this.dialogKey += 1
|
|
this.componentsDialogData = this.tree.down
|
|
this.componentsDialog = true
|
|
}
|
|
})
|
|
area2.addEventListener('dblclick', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
// if (!this.tree.down) {
|
|
this.componentsDialogVisible = true
|
|
this.type = 'down'
|
|
// }
|
|
})
|
|
|
|
let con = this.$refs.con
|
|
this.height = con.offsetHeight
|
|
this.distance = con.offsetHeight * (this.tree.separate / 100)
|
|
|
|
const customMenu = (event) => {
|
|
event.preventDefault()
|
|
}
|
|
con.addEventListener('contextmenu', customMenu)
|
|
|
|
|
|
let separate = this.$refs.separate
|
|
separate.ondrag = (e) => {
|
|
e.preventDefault()
|
|
}
|
|
separate.ondragend = (e) => {
|
|
let con = this.$refs.con
|
|
this.height = con.offsetHeight
|
|
this.tree.separate = ((this.distance + e.offsetY) / this.height) * 100
|
|
if (this.tree.separate < 1) {
|
|
this.tree.separate = 1
|
|
}
|
|
if (this.tree.separate > 99) {
|
|
this.tree.separate = 99
|
|
}
|
|
this.distance = this.height * (this.tree.separate / 100)
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
clearCut() {
|
|
this.$set(this.$parent.tree, 'top', null)
|
|
this.$set(this.$parent.tree, 'topChildren', null)
|
|
this.$set(this.$parent.tree, 'down', null)
|
|
this.$set(this.$parent.tree, 'downChildren', null)
|
|
this.$set(this.$parent.tree, 'left', null)
|
|
this.$set(this.$parent.tree, 'leftChildren', null)
|
|
this.$set(this.$parent.tree, 'right', null)
|
|
this.$set(this.$parent.tree, 'rightChildren', null)
|
|
this.dialogVisible = false
|
|
},
|
|
leftRight() {
|
|
if (this.type === 'top') {
|
|
this.$set(this.tree, 'top', 'LeftRight')
|
|
this.$set(this.tree, 'topChildren', this.tree.topChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
if (this.type === 'down') {
|
|
this.$set(this.tree, 'down', 'LeftRight')
|
|
this.$set(this.tree, 'downChildren', this.tree.downChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
this.dialogVisible = false
|
|
},
|
|
upDown() {
|
|
if (this.type === 'top') {
|
|
this.$set(this.tree, this.type, 'UpDown')
|
|
this.$set(this.tree, 'topChildren', this.tree.topChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
if (this.type === 'down') {
|
|
this.$set(this.tree, this.type, 'UpDown')
|
|
this.$set(this.tree, 'downChildren', this.tree.downChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
this.dialogVisible = false
|
|
},
|
|
SelectComponentsCB(e) {
|
|
this.$set(this.tree, this.type, JSON.parse(JSON.stringify(e)))
|
|
this.componentsDialogVisible = false
|
|
},
|
|
clearCom() {
|
|
this.$set(this.tree, this.type, '')
|
|
this.componentsDialogVisible = false
|
|
},
|
|
closeComponentsDialog() {
|
|
|
|
this.componentsDialog = false
|
|
},
|
|
modelOptionOk(e) {
|
|
this.$set(this.tree[this.type], 'data', e)
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.con {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.separate {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2px;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
background-color: #409EFF;
|
|
cursor: row-resize;
|
|
z-index: 2;
|
|
|
|
&:hover {
|
|
height: 6px;
|
|
}
|
|
}
|
|
|
|
.area {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dialog1 /deep/ .el-dialog .el-dialog__body {
|
|
padding: 0;
|
|
height: calc(100% - 54px - 60px);
|
|
overflow: hidden;
|
|
}
|
|
</style>
|