forked from github/dataease
feat:样式修改
This commit is contained in:
wangjiahao
parent
9b036083a3
commit
57fe2bc62f
@ -135,5 +135,6 @@ export default {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,93 +1,29 @@
|
||||
<template>
|
||||
<div class="bg">
|
||||
<div id="preview-parent" class="canvas-container">
|
||||
<div
|
||||
class="canvas"
|
||||
:style="{
|
||||
width: changeStyleWithScale(canvasStyleData.width) + 'px',
|
||||
height: changeStyleWithScale(canvasStyleData.height) + 'px',
|
||||
}"
|
||||
>
|
||||
<ComponentWrapper
|
||||
v-for="(item, index) in componentData"
|
||||
:key="index"
|
||||
:config="item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;height: 100%;background-color: #f7f8fa">
|
||||
<span style="line-height: 35px; position: absolute; top:10px;right: 20px;z-index:100000">
|
||||
<el-button size="mini" @click="toDir">
|
||||
关闭
|
||||
</el-button>
|
||||
</span>
|
||||
<Preview />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getStyle } from '@/components/canvas/utils/style'
|
||||
import { mapState } from 'vuex'
|
||||
import ComponentWrapper from './ComponentWrapper'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
import { uuid } from 'vue-uuid'
|
||||
|
||||
import Preview from './Preview'
|
||||
import bus from '@/utils/bus'
|
||||
|
||||
export default {
|
||||
components: { ComponentWrapper },
|
||||
model: {
|
||||
prop: 'show',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'componentData',
|
||||
'canvasStyleData'
|
||||
]),
|
||||
mounted() {
|
||||
// 计算组件当前合适宽度
|
||||
},
|
||||
created() {
|
||||
this.restore()
|
||||
},
|
||||
components: { Preview },
|
||||
|
||||
methods: {
|
||||
changeStyleWithScale,
|
||||
|
||||
getStyle,
|
||||
|
||||
close() {
|
||||
this.$emit('change', false)
|
||||
},
|
||||
restore() {
|
||||
// 用保存的数据恢复画布
|
||||
if (localStorage.getItem('canvasData')) {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
|
||||
}
|
||||
|
||||
if (localStorage.getItem('canvasStyle')) {
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
|
||||
}
|
||||
},
|
||||
resetID(data) {
|
||||
data.forEach(item => {
|
||||
item.id = uuid.v1()
|
||||
})
|
||||
|
||||
return data
|
||||
toDir() {
|
||||
debugger
|
||||
this.$router.replace('/panel/index')
|
||||
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.canvas {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -216,8 +216,8 @@ export default {
|
||||
},
|
||||
|
||||
clickPreview() {
|
||||
const url = '#/preview'
|
||||
window.open(url, '_blank')
|
||||
// 编辑时临时保存 当前修改的画布
|
||||
this.$router.replace('/PreviewFullScreen')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,6 +77,12 @@ export const constantRoutes = [
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/previewFullScreen',
|
||||
component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
:data="defaultData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="panelDefaultClick"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ data }" class="custom-tree-node">
|
||||
<span>
|
||||
@ -419,7 +419,6 @@ export default {
|
||||
nodeClick(data, node) {
|
||||
if (data.nodeType === 'panel') {
|
||||
// 加载视图数据
|
||||
this.$nextTick(() => {
|
||||
get('panel/group/findOne/' + data.id).then(response => {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
|
||||
@ -427,7 +426,6 @@ export default {
|
||||
this.currGroup = data
|
||||
eventBus.$emit('componentDataChange', '')
|
||||
})
|
||||
})
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-row style="height: 100%;width: 100%;">
|
||||
<el-row v-if="showMain" style="height: 100%;width: 100%;">
|
||||
<el-col v-if="panelInfo.name.length>0" class="panel-design">
|
||||
<el-row class="panel-design-head">
|
||||
<!--TODO 仪表盘头部区域-->
|
||||
@ -25,12 +25,14 @@
|
||||
<script>
|
||||
import Preview from '@/components/canvas/components/Editor/Preview'
|
||||
import { mapState } from 'vuex'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
|
||||
export default {
|
||||
name: 'PanelViewShow',
|
||||
components: { Preview },
|
||||
data() {
|
||||
return {
|
||||
showMain: false
|
||||
|
||||
}
|
||||
},
|
||||
@ -44,7 +46,14 @@ export default {
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// 监听数据变动事件 刷新清楚历史样式
|
||||
eventBus.$on('componentDataChange', () => {
|
||||
// 刷新
|
||||
this.showMain = false
|
||||
this.$nextTick(() => {
|
||||
this.showMain = true
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
clickPreview() {
|
||||
|
||||
@ -1,26 +1,16 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<!-- <de-header>Header</de-header> -->
|
||||
<el-header class="de-header">
|
||||
<el-row class="panel-design-head">
|
||||
<span style="float: left;line-height: 35px; color: gray">
|
||||
|
||||
<span>名称：测试仪表板</span>
|
||||
|
||||
<span style="line-height: 35px; position: absolute; top:10px;right: 10px">
|
||||
<el-button size="mini" @click="toDir">
|
||||
关闭
|
||||
</el-button>
|
||||
</span>
|
||||
<span style="float: right;line-height: 35px;">
|
||||
|
||||
<el-tooltip content="返回目录">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
|
||||
</el-tooltip>
|
||||
|
||||
</span>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<de-container>
|
||||
|
||||
<de-main-container class="ms-main-container">
|
||||
<!-- <drawing-board :disabled="true" />-->
|
||||
<!-- <drawing-board :disabled="true" />-->
|
||||
this is test
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</el-container>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user