Skip to content

D
dataease
提交 5ef299df authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat: 编辑仪表盘同时支持自适应画布区域和实际画布大小两种编辑模式

上级 4ae84882
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 225 行增加 和 60 行删除
frontend/src/components/canvas/components/Editor/Area.vue
浏览文件 @ 5ef299df
<template>
<div :style="{
left: start.x + 'px',
top: start.y + 'px',
width: width + 'px',
height: height + 'px',
}" class="area"></div>
<div
:style="{
left: start.x + 'px',
top: start.y + 'px',
width: width + 'px',
height: height + 'px',
}"
class="area"
/>
</template>
<script>
export default {
props: {
start: {
type: Object,
},
width: {
type: Number,
},
height: {
type: Number,
},
props: {
start: {
type: Object
},
width: {
type: Number
},
height: {
type: Number
}
}
}
</script>
......@@ -28,4 +31,4 @@ export default {
border: 1px solid #70c0ff;
position: absolute;
}
</style>
\ No newline at end of file
</style>
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ 5ef299df
......@@ -14,13 +14,15 @@
<Shape
v-for="(item, index) in componentData"
:key="item.id"
:default-style="item.style"
:default-style="getShapeStyleInt(item.style)"
:style="getShapeStyle(item.style)"
:active="item === curComponent"
:element="item"
:index="index"
:class="{ lock: item.isLock }"
>
<!-- item.style-&#45;&#45;{{ item.style }}-->
<!-- item.style-&#45;&#45;{{ getShapeStyleInt(item.style) }}-->
<component
:is="item.component"
......@@ -76,6 +78,7 @@ import Grid from './Grid'
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import { Condition } from '@/components/widget/bean/Condition'
import bus from '@/utils/bus'
export default {
components: { Shape, ContextMenu, MarkLine, Area, Grid },
props: {
......@@ -86,6 +89,10 @@ export default {
filter: {
type: Object,
require: false
},
outStyle: {
type: Object,
require: false
}
},
data() {
......@@ -99,31 +106,58 @@ export default {
width: 0,
height: 0,
isShowArea: false,
conditions: []
conditions: [],
scaleWidth: 100,
scaleHeight: 100,
timer: null,
needToChangeHeight: [
'top',
'height',
'fontSize',
'borderWidth'
],
needToChangeWidth: [
'left',
'width'
]
}
},
watch: {
outStyle: {
handler(newVal, oldVla) {
this.changeScale()
},
deep: true
},
canvasStyleData: {
handler(newVal, oldVla) {
this.changeScale()
},
deep: true
}
},
computed: {
customStyle() {
let style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px'
width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
height: this.format(this.canvasStyleData.height, this.scaleHeight) + 'px'
}
console.log('customStyle=>' + JSON.stringify(style))
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
...style
}
} else {
style = {
width: this.changeStyleWithScale(this.canvasStyleData.width) + 'px',
height: this.changeStyleWithScale(this.canvasStyleData.height) + 'px',
background: this.canvasStyleData.panel.color
background: this.canvasStyleData.panel.color,
...style
}
}
}
return style
},
panelInfo() {
......@@ -153,7 +187,6 @@ export default {
},
methods: {
changeStyleWithScale,
handleMouseDown(e) {
// 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
......@@ -218,8 +251,10 @@ export default {
// 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
// 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
let top = Infinity; let left = Infinity
let right = -Infinity; let bottom = -Infinity
let top = Infinity
let left = Infinity
let right = -Infinity
let bottom = -Infinity
areaData.forEach(component => {
let style = {}
if (component.component === 'Group') {
......@@ -303,19 +338,34 @@ export default {
getShapeStyle(style) {
const result = {};
['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
if (attr !== 'rotate') {
result[attr] = style[attr] + 'px'
} else {
result.transform = 'rotate(' + style[attr] + 'deg)'
}
['width', 'left'].forEach(attr => {
result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
});
['height', 'top'].forEach(attr => {
result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
})
result.transform = 'rotate(' + style['rotate'] + 'deg)'
return result
},
getShapeStyleInt(style) {
const result = {};
['width', 'left'].forEach(attr => {
result[attr] = this.format(style[attr], this.scaleWidth)
});
['height', 'top'].forEach(attr => {
result[attr] = this.format(style[attr], this.scaleHeight)
})
result['rotate'] = style['rotate']
result['borderWidth'] = style['borderWidth']
result['opacity'] = style['opacity']
return result
},
getComponentStyle(style) {
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
return style
},
......@@ -368,6 +418,21 @@ export default {
},
executeSearch() {
console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
},
format(value, scale) {
// 自适应画布区域 返回原值
if (this.canvasStyleData.selfAdaption) {
return parseInt(value * parseInt(scale) / 100)
} else {
return parseInt(value)
}
},
changeScale() {
if (this.outStyle.width && this.outStyle.height) {
this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
this.$store.commit('setCurCanvasScale', { scaleWidth: this.scaleWidth, scaleHeight: this.scaleHeight })
}
}
}
}
......
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ 5ef299df
<template>
<div>
<div class="toolbar">
<div class="canvas-config" style="margin-right: 10px">
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" label="自适应画布区域" name="selfAdaption" />
<span>自适应画布区域 </span>
</div>
<div class="canvas-config" style="margin-right: 10px">
<span> {{ $t('panel.canvas_size') }} </span>
<input v-model="canvasStyleData.width">
<input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
<span>*</span>
<input v-model="canvasStyleData.height">
<input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
</div>
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
......@@ -140,7 +146,6 @@ export default {
...this.canvasStyleData,
scale: this.scale
})
this.$nextTick(() => (eventBus.$emit('resizing', '')))
}, 1000)
},
......@@ -320,4 +325,17 @@ export default {
background-color: #ffffff!important;
}
>>>.el-switch__core{
width:30px!important;
height:15px;
/*color:#409EFF;*/
}
/*设置圆*/
>>>.el-switch__core::after{
width:14px;
height:14px;
margin-top:-1px;
margin-bottom: 2px;
}
</style>
frontend/src/components/canvas/utils/translate.js
浏览文件 @ 5ef299df
......@@ -126,6 +126,30 @@ export function changeStyleWithScale(value) {
return value * parseInt(store.state.canvasStyleData.scale) / 100
}
export function changeStyleWithScaleIn(value, scale) {
return value * parseInt(scale) / 100
// 自适应宽高
export function changeStyleWithScaleHeightInAuto(value) {
const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
const result = value * scale / 100
console.log('heightInAuto=>' + scale + ';' + result)
return result
}
// 自适应宽高
export function changeStyleWithScaleWidthInAuto(value) {
const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
const result = value * scale / 100
console.log('widthInAuto=>' + scale + ';' + result)
return result
}
export function getOriginStyleHeight(value) {
const scale = store.state.canvasStyleData.scaleHeight ? store.state.canvasStyleData.scaleHeight : 100
const result = value / (scale / 100)
return result
}
export function getOriginStyleWidth(value) {
const scale = store.state.canvasStyleData.scaleWidth ? store.state.canvasStyleData.scaleWidth : 100
const result = value / (scale / 100)
return result
}
frontend/src/store/index.js
浏览文件 @ 5ef299df
......@@ -42,6 +42,7 @@ const data = {
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
componentData: [], // 画布组件数据
curComponent: null,
curCanvasScale: null,
curComponentIndex: null,
// 点击画布时是否点中组件，主要用于取消选中组件用。
// 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
......@@ -75,11 +76,16 @@ const data = {
state.curComponentIndex = index
},
setShapeStyle({ curComponent }, { top, left, width, height, rotate }) {
if (top) curComponent.style.top = top
if (left) curComponent.style.left = left
if (width) curComponent.style.width = width
if (height) curComponent.style.height = height
setCurCanvasScale(state, curCanvasScale) {
debugger
state.curCanvasScale = curCanvasScale
},
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
if (top) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
if (left) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
if (width) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
if (height) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
if (rotate) curComponent.style.rotate = rotate
},
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ 5ef299df
......@@ -57,7 +57,7 @@
</de-aside-container>
<!--画布区域-->
<de-main-container style="margin-left: 5px;margin-right: 5px">
<de-main-container id="canvasInfo-main" style="margin-left: 5px;margin-right: 5px">
<!--左侧抽屉-->
<el-drawer
:visible.sync="show"
......@@ -76,13 +76,14 @@
</el-drawer>
<div
id="canvasInfo"
class="content this_canvas"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor style="margin: 15px;" />
<Editor :out-style="outStyle" />
</div>
</de-main-container>
<de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
......@@ -147,6 +148,7 @@ import { findOne } from '@/api/panel/panel'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList.vue'
import elementResizeDetectorMaker from 'element-resize-detector'
// 引入样式
import '@/components/canvas/assets/iconfont/iconfont.css'
......@@ -187,7 +189,21 @@ export default {
subjectVisible: false,
previewVisible: false,
componentStyleShow: true,
aidedButtonActive: false
aidedButtonActive: false,
timer: null,
needToChange: [
'top',
'left',
'width',
'height',
'fontSize',
'borderWidth'
],
scale: '100',
outStyle: {
width: null,
height: null
}
}
},
......@@ -238,6 +254,15 @@ export default {
bus.$on('previewFullScreenClose', () => {
this.previewVisible = false
})
const _this = this
const erd = elementResizeDetectorMaker()
// 监听div变动事件
erd.listenTo(document.getElementById('canvasInfo-main'), element => {
_this.$nextTick(() => {
debugger
_this.restore()
})
})
},
beforeDestroy() {
const elx = this.$refs.rightPanel
......@@ -410,8 +435,24 @@ export default {
},
changeAidedDesign() {
this.aidedButtonActive = !this.aidedButtonActive
},
getOriginStyle(value) {
const scale = this.canvasStyleData.scale
const result = value / (parseInt(scale) / 100)
return result
},
restore() {
debugger
if (document.getElementById('canvasInfo')) {
this.$nextTick(() => {
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
this.outStyle.height = canvasHeight
this.outStyle.width = canvasWidth
console.log(canvasHeight + '--' + canvasWidth)
})
}
}
}
}
</script>
......@@ -419,9 +460,9 @@ export default {
<style scoped>
.ms-aside-container {
height: calc(100vh - 91px);
min-width: 40px;
max-width: 60px;
border: none;
width: 60px;
}
.ms-main-container {
......
frontend/src/views/panel/list/PanelList.vue
浏览文件 @ 5ef299df
......@@ -217,9 +217,12 @@ export default {
nodeType: null,
panelType: null,
panelStyle: JSON.stringify({
width: 1280,
height: 720,
width: 1600,
height: 900,
scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
......@@ -258,9 +261,12 @@ export default {
nodeType: null,
panelType: null,
panelStyle: JSON.stringify({
width: 1280,
height: 720,
width: 1600,
height: 900,
scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
......
frontend/src/views/panel/panel.js
浏览文件 @ 5ef299df
......@@ -19,9 +19,12 @@ export const DEFAULT_PANEL_STYLE = {
}
export const DEFAULT_COMMON_CANVAS_STYLE = {
width: 1280,
height: 720,
width: 1600,
height: 900,
scale: 100,
scaleWidth: 100,
scaleHeight: 100,
selfAdaption: true,
openCommonStyle: true,
panel: DEFAULT_PANEL_STYLE,
chart: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论