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.
356 lines
11 KiB
Vue
356 lines
11 KiB
Vue
<template>
|
|
<div style="height: 100%;width: 100%">
|
|
<div ref="con" class="con">
|
|
<div class="separate" draggable="true" :style="`left: ${tree.separate}%;display:${viewFlag?'none':'block'}`"
|
|
ref="separate"></div>
|
|
<div class="area" ref="area1" :style="`width:${tree.separate}%`">
|
|
<component v-if="typeof tree.left === 'string' " :is="tree.left" :tree="tree.leftChildren"
|
|
:styleData="styleData"
|
|
:viewFlag="viewFlag"></component>
|
|
<component v-if="(tree.left||{}).type" :is="componentsEnum[tree.left.type]" :styleData="styleData"
|
|
:defaultData="tree.left.data"></component>
|
|
</div>
|
|
<div class="area" ref="area2" :style="`width:${100-tree.separate}%;left:${tree.separate}%`">
|
|
<component v-if="typeof tree.right === 'string' " :is="tree.right" :tree="tree.rightChildren"
|
|
:styleData="styleData"
|
|
:viewFlag="viewFlag"></component>
|
|
<component v-if="(tree.right||{}).type" :is="componentsEnum[tree.right.type]" :styleData="styleData"
|
|
:defaultData="tree.right.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,
|
|
ComplexText,
|
|
ComplexScrollTable,
|
|
} 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: 'LeftRight',
|
|
components: {
|
|
UpDown: () => import('./upDownStr'),
|
|
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',
|
|
},
|
|
width: 0,
|
|
distance: 0,
|
|
dialogVisible: false,
|
|
componentsDialogVisible: false,
|
|
type: '',
|
|
componentsDialog: false,
|
|
componentsDialogData: {},
|
|
dialogKey: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
let area1 = this.$refs.area1
|
|
area1.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
if (!this.tree.left) {
|
|
this.dialogVisible = true
|
|
this.type = 'left'
|
|
} else {
|
|
this.type = 'left'
|
|
this.dialogKey += 1
|
|
this.componentsDialogData = this.tree.left
|
|
this.componentsDialog = true
|
|
}
|
|
})
|
|
area1.addEventListener('dblclick', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
// if (!this.tree.left) {
|
|
this.componentsDialogVisible = true
|
|
this.type = 'left'
|
|
// }
|
|
})
|
|
|
|
let area2 = this.$refs.area2
|
|
area2.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
if (!this.tree.right) {
|
|
this.dialogVisible = true
|
|
this.type = 'right'
|
|
} else {
|
|
this.type = 'right'
|
|
this.dialogKey += 1
|
|
this.componentsDialogData = this.tree.right
|
|
this.componentsDialog = true
|
|
}
|
|
})
|
|
area2.addEventListener('dblclick', (event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation();
|
|
// if (!this.tree.right) {
|
|
this.componentsDialogVisible = true
|
|
this.type = 'right'
|
|
// }
|
|
})
|
|
|
|
let con = this.$refs.con
|
|
this.width = con.offsetWidth
|
|
this.distance = con.offsetWidth * (this.tree.separate / 100)
|
|
|
|
|
|
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.offsetX) / this.width) * 100
|
|
if (this.tree.separate < 1) {
|
|
this.tree.separate = 1
|
|
}
|
|
if (this.tree.separate > 99) {
|
|
this.tree.separate = 99
|
|
}
|
|
this.distance = this.width * (this.tree.separate / 100)
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
leftRight() {
|
|
if (this.type === 'left') {
|
|
this.$set(this.tree, this.type, 'LeftRight')
|
|
this.$set(this.tree, 'leftChildren', this.tree.leftChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
if (this.type === 'right') {
|
|
this.$set(this.tree, this.type, 'LeftRight')
|
|
this.$set(this.tree, 'rightChildren', this.tree.rightChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
this.dialogVisible = false
|
|
},
|
|
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
|
|
},
|
|
upDown() {
|
|
if (this.type === 'left') {
|
|
this.$set(this.tree, this.type, 'UpDown')
|
|
this.$set(this.tree, 'leftChildren', this.tree.leftChildren || {
|
|
separate: 50
|
|
})
|
|
}
|
|
if (this.type === 'right') {
|
|
this.$set(this.tree, this.type, 'UpDown')
|
|
this.$set(this.tree, 'rightChildren', this.tree.rightChildren || {
|
|
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;
|
|
height: 100%;
|
|
width: 2px;
|
|
transform: translateX(-50%);
|
|
top: 0;
|
|
background-color: #409EFF;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
|
|
&:hover {
|
|
width: 6px;
|
|
}
|
|
}
|
|
|
|
.area {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.dialog1 /deep/ .el-dialog .el-dialog__body {
|
|
padding: 0;
|
|
height: calc(100% - 54px - 60px);
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
|