center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-11-23 16:37:23 +08:00
commit 50bf35bc61
26 changed files with 801 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -49,6 +49,7 @@
"vue-codemirror": "^4.0.6",
"vue-fullscreen": "^2.5.2",
"vue-i18n": "7.3.2",
"vue-proportion-directive": "^1.1.0",
"vue-router": "3.0.6",
"vue-to-pdf": "^1.0.0",
"vue-uuid": "2.0.2",

20
frontend/src/components/DeDrag/index.vue
View File

@ -29,7 +29,8 @@
]"
:style="mainSlotStyle"
>
<edit-bar v-if="curComponent&&(active||linkageSettingStatus)" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
<edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
<div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div
v-for="(handlei, indexi) in actualHandles"
@ -55,13 +56,13 @@ let eventsFor = events.mouse
// private
import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
export default {
replace: true,
name: 'Dedrag',
components: { EditBar },
components: { EditBar, MobileCheckBar },
props: {
className: {
type: String,
@ -362,10 +363,8 @@ export default {
// 新增 保存中心点位置，用于计算旋转的方向矢量
lastCenterX: 0,
lastCenterY: 0,
//
parentX: 0,
parentY: 0,
// private
// 鼠标移入事件
mouseOn: false,
@ -374,6 +373,16 @@ export default {
}
},
computed: {
// 编辑组件显示
editBarShow() {
// 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置撞他 3.当前不在移动端画布编辑状态
return this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus
},
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
// 显示条件：1.当前是移动端画布编辑状态 2.当前组件在激活状态或者鼠标移入状态
return this.mobileLayoutStatus && (this.active || this.mouseOn)
},
handleStyle() {
return (stick, index) => {
if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
@ -534,6 +543,7 @@ export default {
'curCanvasScale',
'canvasStyleData',
'linkageSettingStatus',
'mobileLayoutStatus',
'componentGap'
])
},

78
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -5,7 +5,7 @@
@click="handleClick"
@mousedown="elementMouseDown"
>
<edit-bar v-if="curComponent && config === curComponent" :element="config" @showViewDetails="showViewDetails" />
<edit-bar v-if="editBarShow" :element="config" @showViewDetails="showViewDetails" />
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
@ -15,7 +15,6 @@
:element="config"
:in-screen="inScreen"
/>
<component
:is="config.component"
v-else
@ -38,9 +37,10 @@ import { mixins } from '@/components/canvas/utils/events'
import { mapState } from 'vuex'
import DeOutWidget from '@/components/dataease/DeOutWidget'
import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
export default {
components: { DeOutWidget, EditBar },
components: { MobileCheckBar, DeOutWidget, EditBar },
mixins: [mixins],
props: {
config: {
@ -65,10 +65,14 @@ export default {
}
},
computed: {
editBarShow() {
return this.curComponent && this.config === this.curComponent
},
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([
'mobileLayoutStatus',
'canvasStyleData',
'curComponent',
'componentGap'
@ -79,7 +83,6 @@ export default {
},
methods: {
getStyle,
getShapeStyleIntDeDrag(style, prop) {
if (prop === 'rotate') {
return style['rotate']
@ -95,7 +98,6 @@ export default {
}
if (prop === 'top') {
const top = this.format(style['top'], this.scaleHeight)
// console.log('top:' + top)
return top
}
},
@ -106,25 +108,33 @@ export default {
getOutStyleDefault(style) {
const result = {
padding: this.curGap + 'px'
};
['width', 'left'].forEach(attr => {
result[attr] = style[attr] + 'px'
});
['height', 'top'].forEach(attr => {
result[attr] = style[attr] + 'px'
})
result['rotate'] = style['rotate']
// result['opacity'] = style['opacity']
}
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
if (this.mobileLayoutStatus && !this.config.mobileSelected) {
result.width = '100%'
result.height = '100%'
} else {
['width', 'left'].forEach(attr => {
result[attr] = style[attr] + 'px'
});
['height', 'top'].forEach(attr => {
result[attr] = style[attr] + 'px'
})
result['rotate'] = style['rotate']
}
return result
// return style
},
getComponentStyleDefault(style) {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// console.log('styleInfo', JSON.stringify(styleInfo))
// return styleInfo
// return style
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
if (this.mobileLayoutStatus && !this.config.mobileSelected) {
return {
width: '100%',
height: '100%'
}
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
}
},
handleClick() {
@ -151,19 +161,21 @@ export default {
</script>
<style lang="scss" scoped>
.component {
.component {
position: absolute;
}
}
.component:hover {
box-shadow:0px 0px 7px #0a7be0;
}
.gap_class{
padding:5px;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
.component:hover {
box-shadow: 0px 0px 7px #0a7be0;
}
.gap_class {
padding: 5px;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
</style>

9
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -3,7 +3,6 @@
<div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
<el-checkbox v-model="linkageInfo.linkageActive" />
<linkage-field v-if="linkageInfo.linkageActive" :element="element" />
<!-- <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
</div>
<div v-else-if="!linkageSettingStatus">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet">
@ -26,9 +25,6 @@
<span :title="$t('panel.cancel_linkage')">
<i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
</span>
<!-- <spa>-->
<!-- {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
<!-- </spa>-->
</div>
</div>
@ -39,7 +35,6 @@ import { mapState } from 'vuex'
import bus from '@/utils/bus'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import LinkageField from '@/components/canvas/components/Editor/LinkageField'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
components: { SettingMenu, LinkageField },
@ -73,7 +68,6 @@ export default {
}
},
mounted() {
// this.createTimer()
},
computed: {
existLinkage() {
@ -106,7 +100,6 @@ export default {
])
},
beforeDestroy() {
// this.destroyTimer()
},
methods: {
createTimer() {
@ -172,9 +165,7 @@ export default {
if (this.curComponent.type === 'custom') {
bus.$emit('component-dialog-edit')
}
// 编辑样式组件
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
bus.$emit('component-dialog-style')
}

86
frontend/src/components/canvas/components/Editor/MobileCheckBar.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="bar-main">
<div style="width: 18px">
<!-- <svg-icon icon-class="field_text" class="el-icon-close" />-->
<el-checkbox v-model="element.mobileSelected" @change="onChange" />
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
props: {
element: {
type: Object,
required: true
}
},
data() {
return {
timer: null
}
},
computed: {
...mapState([
'pcComponentData',
'pcComponentGap'
])
},
mounted() {
},
beforeDestroy() {
},
methods: {
onChange() {
if (this.element.mobileSelected) {
this.element.style.width = 1600
this.element.style.height = 300
this.element.style.left = 0
this.element.style.top = 0
this.element.sizex = 6
this.element.sizey = 4
this.element.x = 1
this.element.y = 1
this.element.auxiliaryMatrix = true
this.$store.commit('addComponent', { component: this.element })
} else {
this.deleteComponent()
}
// this.updateMobileSelected(this.element.id)
},
deleteComponent() {
this.$emit('amRemoveItem')
this.$store.commit('deleteComponent')
this.$store.commit('setCurComponent', { component: null, index: null })
},
updateMobileSelected(id, mobileSelected) {
this.pcComponentData.forEach(item => {
if (item.id === id) {
item.mobileSelected = mobileSelected
}
})
}
}
}
</script>
<style lang="scss" scoped>
.bar-main{
position: absolute;
float:right;
z-index: 2;
border-radius:2px;
padding-left: 1px;
padding-right: 1px;
cursor:pointer!important;
background-color: #0a7be0;
}
.bar-main i{
color: white;
float: right;
margin-right: 3px;
}
</style>

160
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -1,33 +1,41 @@
<template>
<div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg">
<div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }}
</el-row>
<canvas-opt-bar />
<ComponentWrapper
v-for="(item, index) in componentDataInfo"
:key="index"
:config="item"
:search-count="searchCount"
:in-screen="inScreen"
/>
<!--视图详情-->
<el-dialog
:title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
:visible.sync="chartDetailsVisible"
width="70%"
class="dialog-css"
:destroy-on-close="true"
<div class="bg" :style="customStyle">
<div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
<div
id="canvasInfoTemp"
ref="canvasInfoTemp"
class="main-class"
@mouseup="deselectCurComponent"
@mousedown="handleMouseDown"
>
<span style="position: absolute;right: 70px;top:15px">
<el-button size="mini" @click="exportExcel">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
{{ $t('chart.export_details') }}
</el-button>
</span>
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog>
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }}
</el-row>
<canvas-opt-bar />
<ComponentWrapper
v-for="(item, index) in componentDataInfo"
:key="index"
:config="item"
:search-count="searchCount"
:in-screen="inScreen"
/>
<!--视图详情-->
<el-dialog
:title="'['+showChartInfo.name+']'+$t('chart.chart_details')"
:visible.sync="chartDetailsVisible"
width="70%"
class="dialog-css"
:destroy-on-close="true"
>
<span style="position: absolute;right: 70px;top:15px">
<el-button size="mini" @click="exportExcel">
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />
{{ $t('chart.export_details') }}
</el-button>
</span>
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog>
</div>
</div>
</div>
</template>
@ -94,9 +102,7 @@ export default {
},
computed: {
customStyle() {
let style = {
padding: this.componentGap + 'px'
}
let style = {}
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = {
@ -110,16 +116,6 @@ export default {
}
}
}
// if (this.canvasStyleData.selfAdaption) {
// style = {
// overflow: 'hidden',
// ...style
// }
// }
// style = {
// overflow-x :'hidden',
// ...style
// }
return style
},
// 此处单独计算componentData的值 不放入全局mapState中
@ -152,17 +148,17 @@ export default {
const _this = this
const erd = elementResizeDetectorMaker()
// 监听div变动事件
const tempDom = document.getElementById('canvasInfoMain')
erd.listenTo(tempDom, element => {
const mainDom = document.getElementById('canvasInfoMain')
erd.listenTo(mainDom, element => {
_this.$nextTick(() => {
_this.restore()
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempDom.scrollHeight + 'px!important'
_this.mainHeight = mainDom.scrollHeight + 'px!important'
})
})
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
this.$store.commit('clearLinkageSettingInfo', false)
this.canvasStyleDataInit()
_this.$store.commit('clearLinkageSettingInfo', false)
_this.canvasStyleDataInit()
},
beforeDestroy() {
clearInterval(this.timer)
@ -235,8 +231,6 @@ export default {
}
},
handleMouseDown() {
// console.log('handleMouseDown123')
this.$store.commit('setClickComponentStatus', false)
}
}
@ -244,47 +238,45 @@ export default {
</script>
<style lang="scss" scoped>
.bg {
.bg {
padding: 5px;
min-width: 600px;
min-height: 300px;
width: 100%;
height: 100%;
overflow-x: hidden;
/*border: 1px solid #E6E6E6;*/
background-size: 100% 100% !important;
.canvas-container {
width: 100%;
height: 100%;
.canvas {
position: relative;
margin: auto;
}
}
}
.main-class {
width: 100%;
height: 100%;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.gap_class{
padding:5px;
}
.dialog-css>>>.el-dialog__title {
font-size: 14px;
}
.dialog-css >>> .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
}
.main-class {
width: 100%;
height: 100%;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.gap_class {
padding: 5px;
}
.dialog-css > > > .el-dialog__title {
font-size: 14px;
}
.dialog-css > > > .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css > > > .el-dialog__body {
padding: 10px 20px 20px;
}
</style>

172
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -22,6 +22,7 @@
<!--页面组件列表展示-->
<de-drag
v-for="(item, index) in componentData"
ref="deDragRef"
:key="item.id"
:class="{item:true,moveAnimation:moveAnimate,movingItem:item.isPlayer}"
:index="index"
@ -244,15 +245,12 @@ function resetPositionBox() {
const rows = this.matrixCount.y // 初始100行，后面根据需求会自动增加
for (let i = 0; i < rows; i++) {
const row = []
for (let j = 0; j < this.maxCell; j++) {
row.push({
el: false
})
}
positionBox.push(row)
// console.log('positionBox:' + JSON.stringify(positionBox))
}
}
@ -262,7 +260,6 @@ function resetPositionBox() {
* @param {any} item
*/
function addItemToPositionBox(item) {
// console.log('itemInfo:' + JSON.stringify(item))
const pb = positionBox
if (item.x <= 0 || item.y <= 0) return
@ -289,15 +286,11 @@ function fillPositionBox(maxY) {
pb.push(row)
}
}
itemMaxY = maxY
// console.log('height:' + ((itemMaxY) * this.cellHeight) + 'px')
// $(this.$el).css('height', ((itemMaxY) * this.cellHeight) + 'px')
}
function removeItemFromPositionBox(item) {
const pb = positionBox
// console.log('removeItem=>x:' + item.x + ';y:' + item.y + ';sizex:' + item.sizex + ';sizey:' + item.sizey)
if (!item || item.x <= 0 || item.y <= 0) return
for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
@ -313,20 +306,10 @@ function removeItemFromPositionBox(item) {
*
*/
function recalcCellWidth() {
// const containerNode = this.$refs['container']
// this.outStyle.width && this.outStyle.height
// const containerWidth = this.outStyle.width
// const cells = Math.round(containerWidth / this.cellWidth)
this.maxCell = this.matrixCount.x
// if (containerWidth % this.cellWidth !=== 0) {
// this.cellWidth += containerWidth % this.cellWidth / cells;
// }
}
function init() {
// console.log('init-cellWidth')
this.cellWidth = this.baseWidth + this.baseMarginLeft
this.cellHeight = this.baseHeight + this.baseMarginTop
this.yourList = this.getList()
@ -342,12 +325,9 @@ function init() {
itemMaxX = 0
const vm = this
recalcCellWidth.call(this)
resetPositionBox.call(this)
let i = 0
// console.log('initList:' + JSON.stringify(vm.yourList))
const timeid = setInterval(function() {
if (i >= vm.yourList.length) {
clearInterval(timeid)
@ -364,15 +344,12 @@ function init() {
}
function resizePlayer(item, newSize) {
// console.log('resizePlayer')
const vm = this
removeItemFromPositionBox(item)
const belowItems = findBelowItems.call(this, item)
_.forEach(belowItems, function(upItem) {
const canGoUpRows = canItemGoUp(upItem)
if (canGoUpRows > 0) {
moveItemUp.call(vm, upItem, canGoUpRows)
}
@ -394,13 +371,9 @@ function resizePlayer(item, newSize) {
}
emptyTargetCell.call(this, item)
addItemToPositionBox.call(this, item)
changeItemCoord.call(this, item)
const canGoUpRows = canItemGoUp(item)
if (canGoUpRows > 0) {
moveItemUp.call(this, item, canGoUpRows)
}
@ -413,7 +386,6 @@ function resizePlayer(item, newSize) {
* @param {any} position
*/
function checkItemPosition(item, position) {
// console.log('checkItemPosition-info' + JSON.stringify(item))
position = position || {}
position.x = position.x || item.x
position.y = position.y || item.y
@ -459,12 +431,10 @@ function checkItemPosition(item, position) {
* @param {any} position
*/
function movePlayer(item, position) {
// console.log('movePlayer')
const vm = this
removeItemFromPositionBox(item)
const belowItems = findBelowItems.call(this, item)
_.forEach(belowItems, function(upItem) {
const canGoUpRows = canItemGoUp(upItem)
if (canGoUpRows > 0) {
@ -474,17 +444,11 @@ function movePlayer(item, position) {
item.x = position.x
item.y = position.y
// console.log('checkItemPosition3')
checkItemPosition.call(this, item, position)
emptyTargetCell.call(this, item)
addItemToPositionBox.call(this, item)
changeItemCoord.call(this, item)
const canGoUpRows = canItemGoUp(item)
if (canGoUpRows > 0) {
moveItemUp.call(this, item, canGoUpRows)
}
@ -496,12 +460,8 @@ function removeItem(index) {
removeItemFromPositionBox(item)
const belowItems = findBelowItems.call(this, item)
// $(this.$refs['item' + item._dragId][0]).remove();
_.forEach(belowItems, function(upItem) {
const canGoUpRows = canItemGoUp(upItem)
if (canGoUpRows > 0) {
moveItemUp.call(vm, upItem, canGoUpRows)
}
@ -516,23 +476,17 @@ function addItem(item, index) {
index = this.yourList.length
}
item._dragId = index
// console.log('checkItemPosition4')
checkItemPosition.call(this, item, {
x: item.x,
y: item.y
})
emptyTargetCell.call(this, item)
addItemToPositionBox.call(this, item)
const canGoUpRows = canItemGoUp(item)
if (canGoUpRows > 0) {
moveItemUp.call(this, item, canGoUpRows)
}
// 生成坐标点
// makeCoordinate.call(this, item);
}
@ -645,7 +599,6 @@ function changeItemCoord(item) {
* @param {any} item
*/
function emptyTargetCell(item) {
// console.log('emptyTargetCell')
const vm = this
const belowItems = findBelowItems(item)
@ -687,9 +640,7 @@ function canItemGoUp(item) {
function moveItemDown(item, size) {
const vm = this
removeItemFromPositionBox(item)
const belowItems = findBelowItems(item)
_.forEach(belowItems, function(downItem, index) {
if (downItem._dragId === item._dragId) return
const moveSize = calcDiff(item, downItem, size)
@ -697,23 +648,17 @@ function moveItemDown(item, size) {
moveItemDown.call(vm, downItem, moveSize)
}
})
const targetPosition = {
y: item.y + size
}
setPlayerPosition.call(this, item, targetPosition)
// console.log('checkItemPosition1')
checkItemPosition.call(this, item, targetPosition)
addItemToPositionBox.call(this, item)
changeItemCoord.call(this, item)
}
function setPlayerPosition(item, position) {
const vm = this
position = position || {}
const targetX = position.x || item.x
const targetY = position.y || item.y
@ -721,14 +666,8 @@ function setPlayerPosition(item, position) {
item.y = targetY
// 还原到像素
// item.style.left = (item.x - 1) * this.matrixStyle.width
// item.style.top = (item.y - 1) * this.matrixStyle.height
item.style.left = ((item.x - 1) * this.matrixStyle.width) / this.scalePointWidth
item.style.top = ((item.y - 1) * this.matrixStyle.height) / this.scalePointHeight
// console.log('setPlayerPosition:' + item._dragId + '--' + item.x + '--' + item.y + '--top' + item.style.top)
// console.log('setPlayerPosition:x=' + item.style.left + ';y=' + item.style.top + 'componentData:' + JSON.stringify(this.componentData))
if (item.y + item.sizey > itemMaxY) {
itemMaxY = item.y + item.sizey
}
@ -762,14 +701,11 @@ function calcDiff(parent, son, size) {
}
function moveItemUp(item, size) {
// console.log('moveItemUp')
const vm = this
removeItemFromPositionBox(item)
const belowItems = findBelowItems.call(this, item)
// item.y -= size;
setPlayerPosition.call(this, item, {
y: item.y - size
})
@ -857,6 +793,16 @@ export default {
required: false,
type: Function,
default: function() {}
},
matrixCount: {
required: false,
type: Object,
default: () => {
return {
x: 36,
y: 18
}
}
}
},
data() {
@ -900,11 +846,6 @@ export default {
originWidth: 80, // 原始尺寸
originHeight: 20
},
// 矩阵数量 默认 128 * 72
matrixCount: {
x: 36,
y: 18
},
customStyleHistory: null,
showDrag: true,
vLine: [],
@ -940,9 +881,6 @@ export default {
return this.chartDetailsVisible || this.linkJumpSetVisible
},
// 挤占式画布设计
// positionBoxInfo() {
// return getoPsitionBox()
// },
coordinates() {
return coordinates
},
@ -965,8 +903,6 @@ export default {
}
}
}
// console.log('customStyle=>' + JSON.stringify(style) + JSON.stringify(this.canvasStyleData))
return style
},
panelInfo() {
@ -983,65 +919,44 @@ export default {
'linkageSettingStatus',
'curLinkageView',
'doSnapshotIndex',
'componentGap'
'componentGap',
'mobileLayoutStatus'
])
},
watch: {
customStyle: {
handler(newVal) {
// 获取当前宽高（宽高改变后重新渲染画布）
// if (oldVla && newVal !== oldVla) {
// this.showDrag = false
// this.$nextTick(() => (this.showDrag = true))
// }
},
deep: true
},
outStyle: {
handler(newVal, oldVla) {
this.resizeParentBoundsRef()
this.changeScale()
// console.log('newVal:' + JSON.stringify(newVal) + 'oldVla:' + JSON.stringify(this.outStyleOld))
if (this.outStyleOld && (newVal.width > this.outStyleOld.width || newVal.height > this.outStyleOld.height)) {
this.resizeParentBounds()
}
this.outStyleOld = deepCopy(newVal)
},
deep: true
},
// canvasStyleData: {
// handler(newVal, oldVla) {
// // 第一次变化 不需要 重置边界 待改进
// if (this.changeIndex++ > 0) {
// // this.resizeParentBounds()
// this.$store.state.styleChangeTimes++
// }
// // this.changeScale()
// },
// deep: true
// },
componentData: {
handler(newVal, oldVla) {
// console.log('newVal:' + JSON.stringify(newVal) + ';oldVla:' + JSON.stringify(oldVla))
// 初始化时componentData 加载可能出现慢的情况 此时重新初始化一下matrix
if (newVal.length !== this.lastComponentDataLength) {
this.lastComponentDataLength = newVal.length
// console.log('.initMatrix2')
this.initMatrix()
// console.log('componentData-initMatrix')
}
},
deep: true
},
positionBox: {
handler(newVal, oldVla) {
// console.log('positionBox:' + JSON.stringify(positionBox))
},
deep: true
},
// 镜像索引有变化 刷新一下矩阵（撤销重做等）
doSnapshotIndex: {
handler(newVal, oldVla) {
// console.log('snapshotIndexChange:' + newVal)
// console.log('.initMatrix3')
this.initMatrix()
},
deep: true
@ -1053,22 +968,12 @@ export default {
this.changeScale()
this.editShow = true
}, 500)
// this.changeScale()
// 获取编辑器元素
this.$store.commit('getEditor')
const _this = this
// bus.$on('auxiliaryMatrixChange', this.initMatrix)
// bus.$on('auxiliaryMatrixChange', () => {
// _this.$nextTick(() => {
// _this.initMatrix()
// })
// })
eventBus.$on('hideArea', () => {
this.hideArea()
})
// bus.$on('delete-condition', condition => {
// this.deleteCondition(condition)
// })
eventBus.$on('startMoveIn', this.startMoveIn)
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
bus.$on('onRemoveLastItem', this.removeLastItem)
@ -1081,7 +986,6 @@ export default {
}
},
created() {
// this.$store.dispatch('conditions/clear')
},
methods: {
changeStyleWithScale,
@ -1090,9 +994,7 @@ export default {
if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
e.preventDefault()
}
this.hideArea()
// 获取编辑器的位移信息，每次点击时都需要获取一次。主要是为了方便开发时调试用。
const rectInfo = this.editor.getBoundingClientRect()
this.editorX = rectInfo.x
@ -1116,19 +1018,15 @@ export default {
this.start.y = moveEvent.clientY - this.editorY
}
}
const up = (e) => {
document.removeEventListener('mousemove', move)
document.removeEventListener('mouseup', up)
if (e.clientX === startX && e.clientY === startY) {
this.hideArea()
return
}
this.createGroup()
}
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', up)
@ -1337,7 +1235,6 @@ export default {
}
},
getRefLineParams(params) {
// console.log(JSON.stringify(params))
const { vLine, hLine } = params
this.vLine = vLine
this.hLine = hLine
@ -1350,11 +1247,11 @@ export default {
parentBoundsChange(index) {
this.timeMachine = setTimeout(() => {
if (index === this.changeIndex) {
this.showDrag = false
this.$nextTick(() => (this.showDrag = true))
this.changeScale()
console.log('changeScale')
}
this.destroyTimeMachine()
}, 500)
}, 1500)
},
destroyTimeMachine() {
this.timeMachine && clearTimeout(this.timeMachine)
@ -1408,7 +1305,6 @@ export default {
// 挤占式画布设计
startResize(e, item, index) {
// console.log('startResize:' + index)
if (!this.resizable) return
this.resizeStart.call(null, e, item, index)
@ -1418,9 +1314,6 @@ export default {
if (!this.infoBox) {
this.infoBox = {}
}
const itemNode = target.parents('.item')
this.infoBox.resizeItem = item
this.infoBox.resizeItemIndex = index
// this.onStartMove(e, item, index)
@ -1432,22 +1325,14 @@ export default {
if (!this.infoBox) {
this.infoBox = {}
}
// console.log('containerMouseDown=' + e.pageX + ';' + e.pageY)
this.infoBox.startX = e.pageX
this.infoBox.startY = e.pageY
},
onStartMove(e, item, index) {
// console.log('onStartMove:' + index)
const vm = this
// e.preventDefault();
if (!this.infoBox) {
this.infoBox = {}
}
const infoBox = this.infoBox
const target = $(e.target)
this.dragStart.call(null, e, item, index)
infoBox.moveItem = item
infoBox.moveItemIndex = index
@ -1485,15 +1370,9 @@ export default {
const infoBox = this.infoBox
const resizeItem = _.get(infoBox, 'resizeItem')
const vm = this
// console.log('resizeItem')
vm.$set(resizeItem, 'isPlayer', true)
const nowItemIndex = infoBox.resizeItemIndex
// const cloneItem = infoBox.cloneItem
const startX = infoBox.startX
const startY = infoBox.startY
const oldSizeX = infoBox.oldSizeX
const oldSizeY = infoBox.oldSizeY
const moveXSize = e.pageX - startX // X方向移动的距离
const moveYSize = e.pageY - startY // Y方向移动的距离
@ -1534,8 +1413,6 @@ export default {
const infoBox = this.infoBox
const moveItem = _.get(infoBox, 'moveItem')
const vm = this
// console.log('onDragging')
scrollScreen(e)
if (!vm.draggable) return
vm.dragging.call(null, e, moveItem, moveItem._dragId)
@ -1584,10 +1461,7 @@ export default {
}
},
getList() {
// console.log('getList:')
// 不使用copy 保持原有对象
// const returnList = _.sortBy(_.cloneDeep(this.componentData), 'y')
const finalList = []
_.forEach(this.componentData, function(item, index) {
if (_.isEmpty(item)) return
@ -1598,7 +1472,6 @@ export default {
}
})
return finalList
// return this.componentData
},
/**
* 获取x最大值
@ -1649,8 +1522,6 @@ export default {
if (this.$store.state.dragComponentInfo.auxiliaryMatrix) {
const moveInItemInfo = this.$store.state.dragComponentInfo
this.addItemBox(moveInItemInfo)
// console.log('startMoveIn:')
const vm = this
// e.preventDefault();
if (!this.infoBox) {
this.infoBox = {}
@ -1672,6 +1543,13 @@ export default {
},
closeJumpSetDialog() {
this.linkJumpSetVisible = false
},
// 调整父级组件边界
resizeParentBoundsRef() {
const _this = this
_this.componentData.forEach(function(data, index) {
_this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
})
}
}
}

138
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -1,37 +1,28 @@
<template>
<div>
<!-- linkageActiveStatus:{{ linkageActiveStatus }}-->
<div v-if="linkageSettingStatus" class="toolbar">
<div v-if="editControlButton" class="toolbar">
<span style="float: right;">
<el-button size="mini" @click="saveLinkage">
<el-button size="mini" @click="editSave">
{{ $t('commons.confirm') }}
</el-button>
<el-button size="mini" @click="cancelLinkage">
<el-button size="mini" @click="editCancel">
{{ $t('commons.cancel') }}
</el-button>
</span>
</div>
<div v-else class="toolbar">
<el-tooltip :content="'移动端布局'">
<el-button class="icon iconfont-tb icon-yidongduan" size="mini" circle @click="openMobileLayout" />
</el-tooltip>
<el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
<el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
</el-tooltip>
<el-tooltip v-if="canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.matrix')">
<el-button class="icon iconfont-tb icon-shujujuzhen" size="mini" circle @click="auxiliaryMatrixChange" />
</el-tooltip>
<el-tooltip :content="$t('panel.style')">
<el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
<!-- <el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />-->
</el-tooltip>
<!-- <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">-->
<!-- <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />-->
<!-- </el-tooltip>-->
<!-- <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">-->
<!-- <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />-->
<!-- </el-tooltip>-->
<el-tooltip :content="$t('panel.undo') ">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
</el-tooltip>
@ -44,7 +35,6 @@
<el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>
<span style="float: right;margin-left: 10px">
<el-button size="mini" :disabled="changeTimes===0||snapshotIndex===lastSaveSnapshotIndex" @click="save(false)">
{{ $t('commons.save') }}
@ -81,7 +71,7 @@ import toast from '@/components/canvas/utils/toast'
import { mapState } from 'vuex'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/components/canvas/utils/utils'
import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
import { panelSave } from '@/api/panel/panel'
import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
import bus from '@/utils/bus'
@ -89,7 +79,7 @@ import bus from '@/utils/bus'
import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
import {queryPanelJumpInfo} from "@/api/panel/linkJump";
import { queryPanelJumpInfo } from '@/api/panel/linkJump'
export default {
name: 'Toolbar',
@ -114,27 +104,32 @@ export default {
closePanelVisible: false
}
},
computed: mapState([
'componentData',
'canvasStyleData',
'areaData',
'curComponent',
'changeTimes',
'snapshotIndex',
'lastSaveSnapshotIndex',
'linkageSettingStatus',
'curLinkageView',
'targetLinkageInfo'
]),
computed: {
editControlButton() {
return this.linkageSettingStatus || this.mobileLayoutStatus
},
...mapState([
'componentData',
'canvasStyleData',
'areaData',
'curComponent',
'changeTimes',
'snapshotIndex',
'lastSaveSnapshotIndex',
'linkageSettingStatus',
'curLinkageView',
'targetLinkageInfo',
'mobileLayoutStatus',
'mobileComponentData',
'componentDataCache'
])
},
created() {
eventBus.$on('preview', this.preview)
eventBus.$on('save', this.save)
eventBus.$on('clearCanvas', this.clearCanvas)
this.scale = this.canvasStyleData.scale
},
methods: {
close() {
// 关闭页面清理缓存
@ -158,13 +153,11 @@ export default {
const scale = this.scale
return value * scale / 100
},
getOriginStyle(value) {
const scale = this.canvasStyleData.scale
const result = value / (scale / 100)
return result
},
handleScaleChange() {
clearTimeout(this.timer)
setTimeout(() => {
@ -178,7 +171,6 @@ export default {
}
})
})
this.$store.commit('setComponentData', componentData)
this.$store.commit('setCanvasStyle', {
...this.canvasStyleData,
@ -216,13 +208,13 @@ export default {
showPanel() {
this.$emit('showPanel', 2)
},
handleFileChange(e) {
const file = e.target.files[0]
if (!file.type.includes('image')) {
toast('只能插入图片')
return
}
const reader = new FileReader()
reader.onload = (res) => {
const fileResult = res.target.result
@ -249,10 +241,8 @@ export default {
}
}
})
this.$store.commit('recordSnapshot', 'handleFileChange')
}
img.src = fileResult
}
@ -267,7 +257,6 @@ export default {
save(withClose) {
// 清理联动信息
this.$store.commit('clearPanelLinkageInfo')
// 保存到数据库
const requestInfo = {
id: this.$store.state.panel.panelInfo.id,
@ -307,7 +296,6 @@ export default {
},
saveLinkage() {
// 字段检查
// let checkCount = 0
for (const key in this.targetLinkageInfo) {
let subCheckCount = 0
const linkageInfo = this.targetLinkageInfo[key]
@ -329,15 +317,6 @@ export default {
return
}
}
// if (checkCount > 0) {
// this.$message({
// message: this.$t('panel.exit_un_march_linkage_field'),
// type: 'error',
// showClose: true
// })
// return
// }
const request = {
panelId: this.$store.state.panel.panelInfo.id,
sourceViewId: this.curLinkageView.propValue.viewId,
@ -355,6 +334,10 @@ export default {
})
})
},
cancelMobileLayoutStatue(sourceComponentData) {
this.$store.commit('setComponentData', sourceComponentData)
this.$store.commit('setMobileLayoutStatus', false)
},
cancelLinkage() {
this.cancelLinkageSettingStatus()
},
@ -363,6 +346,57 @@ export default {
},
auxiliaryMatrixChange() {
this.canvasStyleData.auxiliaryMatrix = !this.canvasStyleData.auxiliaryMatrix
},
openMobileLayout() {
this.$store.commit('setComponentDataCache', JSON.stringify(this.componentData))
this.$store.commit('setPcComponentData', this.componentData)
const mainComponentData = []
// 移动端布局转换
this.componentData.forEach(item => {
if (item.mobileSelected) {
item.style = item.mobileStyle.style
item.x = item.mobileStyle.x
item.y = item.mobileStyle.y
item.sizex = item.mobileStyle.sizex
item.sizey = item.mobileStyle.sizey
item.auxiliaryMatrix = item.mobileStyle.auxiliaryMatrix
mainComponentData.push(item)
}
})
this.$store.commit('setComponentData', mainComponentData)
this.$store.commit('setMobileLayoutStatus', !this.mobileLayoutStatus)
},
editSave() {
if (this.mobileLayoutStatus) {
this.mobileLayoutSave()
} else {
this.saveLinkage()
}
},
editCancel() {
if (this.mobileLayoutStatus) {
this.cancelMobileLayoutStatue(JSON.parse(this.componentDataCache))
} else {
this.cancelLinkageSettingStatus()
}
},
// 移动端布局保存
mobileLayoutSave() {
this.$store.state.styleChangeTimes++
const mobileDataObj = {}
this.componentData.forEach(item => {
mobileDataObj[item.id] = item
})
const sourceComponentData = JSON.parse(this.componentDataCache)
sourceComponentData.forEach(item => {
if (mobileDataObj[item.id]) {
mobile2MainCanvas(item, mobileDataObj[item.id])
} else {
item.mobileSelected = false
}
})
this.cancelMobileLayoutStatue(sourceComponentData)
}
}
}
@ -374,9 +408,6 @@ export default {
height: 35px;
line-height: 35px;
min-width: 400px;
/*background: #fff;*/
/*border-bottom: 1px solid #ddd;*/
.canvas-config {
display: inline-block;
margin-left: 10px;
@ -439,7 +470,6 @@ export default {
>>>.el-switch__core{
width:30px!important;
height:15px;
/*color:#409EFF;*/
}
/*设置圆*/
>>>.el-switch__core::after{

20
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -8,7 +8,6 @@
'rect-shape'
]"
>
<!-- <i v-if="requestStatus==='success'" style="right:25px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" />-->
<div v-if="requestStatus==='error'" class="chart-error-class">
<div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
{{ message }},{{ $t('chart.chart_show_error') }}
@ -18,7 +17,6 @@
</div>
<chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
<chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
<!-- <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
<table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
<label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
<div style="position: absolute;left: 20px;bottom:14px;">
@ -132,7 +130,6 @@ export default {
})
this.chart.data && this.chart.data.sourceFields && this.chart.data.sourceFields.forEach(item => {
const sourceInfo = this.chart.id + '#' + item.id
// console.log('nowPanelJumpInfo=>' + JSON.stringify(this.nowPanelJumpInfo))
if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++
}
@ -140,7 +137,6 @@ export default {
jumpCount && trackMenuInfo.push('jump')
linkageCount && trackMenuInfo.push('linkage')
this.drillFields.length && trackMenuInfo.push('drill')
// console.log('trackMenuInfo' + JSON.stringify(trackMenuInfo))
return trackMenuInfo
},
chartType() {
@ -158,12 +154,10 @@ export default {
watch: {
'filters': function(val1, val2) {
// this.getData(this.element.propValue.viewId)
isChange(val1, val2) && this.getData(this.element.propValue.viewId)
},
linkageFilters: {
handler(newVal, oldVal) {
// isChange(newVal, oldVal) && this.getData(this.element.propValue.viewId)
if (isChange(newVal, oldVal)) {
this.getData(this.element.propValue.viewId)
}
@ -173,7 +167,6 @@ export default {
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {
// this.chart.stylePriority == panel 优先使用仪表板样式
this.mergeStyle()
},
deep: true
@ -215,7 +208,6 @@ export default {
created() {
this.refId = uuid.v1
// this.filter.filter = this.$store.getters.conditions
if (this.element && this.element.propValue && this.element.propValue.viewId) {
this.getData(this.element.propValue.viewId)
}
@ -226,7 +218,6 @@ export default {
},
methods: {
mergeStyle() {
// this.chart.stylePriority == panel 优先使用仪表板样式
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle)
@ -235,7 +226,6 @@ export default {
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
// 组件样式-标题设置 - 标题修改为组件自己控制
// customStyleChart.text = customStylePanel.text
// 组件样式-背景设置
customStyleChart.background = customStylePanel.background
// 图形属性-颜色设置
@ -368,7 +358,6 @@ export default {
showClose: true
})
}
// console.log('param=>' + JSON.stringify(param))
},
resetDrill() {
@ -404,7 +393,6 @@ export default {
this.currentAcreaNode = tempNode
const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code)
// this.$refs.dynamicChart && this.$refs.dynamicChart.registerDynamicMap && this.$refs.dynamicChart.registerDynamicMap(this.currentAcreaNode.code)
},
// 切换下一级地图
@ -415,12 +403,10 @@ export default {
if (this.currentAcreaNode) {
aCode = this.currentAcreaNode.code
}
// const aCode = this.currentAcreaNode ? this.currentAcreaNode.code : null
const customAttr = JSON.parse(this.chart.customAttr)
const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places)
if (currentNode && currentNode.children && currentNode.children.length > 0) {
const nextNode = currentNode.children.find(item => item.name === name)
// this.view.customAttr.areaCode = nextNode.code
this.currentAcreaNode = nextNode
const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
@ -439,14 +425,8 @@ export default {
}
},
initAreas() {
// let mapping
// if ((mapping = localStorage.getItem('areaMapping')) !== null) {
// this.places = JSON.parse(mapping)
// return
// }
Object.keys(this.places).length === 0 && areaMapping().then(res => {
this.places = res.data
// localStorage.setItem('areaMapping', JSON.stringify(res.data))
})
},
doMapLink(linkFilters) {

28
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -1,3 +1,17 @@
// 基础移动端定位样式
export const BASE_MOBILE_STYLE = {
style: {
width: 1600,
height: 300,
borderRadius: 5
},
x: 1,
y: 1,
sizex: 6,
sizey: 4,
auxiliaryMatrix: true
}
// 公共样式
export const commonStyle = {
rotate: 0,
@ -90,7 +104,7 @@ export const pictureList = [
id: '20001',
component: 'picture-add',
type: 'picture-add',
label: '拖拽上传',
label: '图片',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter'
},
@ -124,6 +138,7 @@ const list = [
propValue: '双击输入文字',
icon: 'wenben',
type: 'v-text',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 100,
@ -150,6 +165,7 @@ const list = [
propValue: '按钮',
icon: 'button',
type: 'v-button',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 100,
height: 34,
@ -172,6 +188,7 @@ const list = [
icon: 'tupian',
type: 'Picture',
propValue: require('@/components/canvas/assets/title.jpg'),
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@ -189,6 +206,7 @@ const list = [
icon: 'tupian',
type: 'Picture',
propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
mobileStyle: BASE_MOBILE_STYLE,
style: {
borderStyle: 'solid',
borderWidth: 0,
@ -204,6 +222,7 @@ const list = [
propValue: '',
icon: 'juxing',
type: 'rect-shape',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@ -225,6 +244,7 @@ const list = [
propValue: '',
icon: 'juxing',
type: 'view',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 300,
height: 200,
@ -243,6 +263,7 @@ const list = [
propValue: '',
icon: 'tabs',
type: 'de-tabs',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 200,
height: 200,
@ -271,6 +292,7 @@ const list = [
propValue: '',
icon: 'shijian',
type: 'de-show-date',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 250,
height: 100,
@ -304,9 +326,10 @@ const list = [
id: '20001',
component: 'picture-add',
type: 'picture-add',
label: '拖拽上传',
label: '图片',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 200,
@ -324,6 +347,7 @@ const list = [
label: '',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter',
mobileStyle: BASE_MOBILE_STYLE,
style: {
width: 400,
height: 200,

16
frontend/src/components/canvas/utils/utils.js
View File

@ -37,7 +37,21 @@ export function toTop(arr, i, j) {
export function toBottom(arr, i) {
arr.unshift(arr.splice(i, 1)[0])
}
}
export function $(selector) {
return document.querySelector(selector)
}
export function mobile2MainCanvas(mainSource, mobileSource) {
mainSource.mobileSelected = true
mainSource.mobileStyle.style = {
width: mobileSource.style.width,
height: mobileSource.style.height,
left: mobileSource.style.left,
top: mobileSource.style.top
}
mainSource.mobileStyle.x = mobileSource.x
mainSource.mobileStyle.y = mobileSource.x
mainSource.mobileStyle.sizex = mobileSource.sizex
mainSource.mobileStyle.sizey = mobileSource.sizey
}

52
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -1,29 +1,31 @@
<template>
<div ref="myContainer" class="my-container">
<div ref="conditionMain" class="condition-main" :class="mainClass">
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
<div class="condition-title-absolute">
<div class="first-title">
<div class="span-container">
<span ref="deTitle">{{ element.options.attrs.title }}</span>
<div class="outside-container">
<div ref="myContainer" class="my-container">
<div ref="conditionMain" class="condition-main" :class="mainClass">
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
<div class="condition-title-absolute">
<div class="first-title">
<div class="span-container">
<span ref="deTitle">{{ element.options.attrs.title }}</span>
</div>
</div>
</div>
</div>
</div>
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
<div class="condition-content-container">
<div class="first-element">
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
<component
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
/>
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
<div class="condition-content-container">
<div class="first-element">
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
<component
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
/>
</div>
</div>
</div>
</div>
@ -97,12 +99,16 @@ export default {
</script>
<style lang="scss" scoped>
.outside-container {
width: 100%;
height: 100%;
}
.my-container {
position: absolute;
overflow: auto;
inset: 0px;
}
.ccondition-main {
.condition-main {
position: absolute;
overflow: auto;
inset: 0px;

6
frontend/src/main.js
View File

@ -83,11 +83,13 @@ import vueToPdf from 'vue-to-pdf'
Vue.use(vueToPdf)
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer)
// 控制标签宽高成比例的指令
import proportion from 'vue-proportion-directive'
Vue.use(proportion)
Vue.prototype.hasDataPermission = function(pTarget, pSource) {
if (this.$store.state.user.user.isAdmin) {
return true

72
frontend/src/store/index.js
View File

@ -41,10 +41,19 @@ const data = {
...layer.state,
...snapshot.state,
...lock.state,
editMode: 'edit', // 编辑器模式 edit preview
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
componentData: [], // 画布组件数据
// 编辑器模式 edit preview
editMode: 'edit',
// 当前页面全局数据 包括扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
// 当前展示画布缓存数据
componentDataCache: null,
// 当前展示画布组件数据
componentData: [],
// PC布局画布组件数据
pcComponentData: [],
// 移动端布局画布组件数据
mobileComponentData: [],
// 当前点击组件
curComponent: null,
curCanvasScale: null,
curComponentIndex: null,
@ -59,17 +68,29 @@ const data = {
// 和当前组件联动的目标组件
targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息
nowPanelTrackInfo: {}, // 当前仪表板联动 下钻 上卷等信息
nowPanelJumpInfo: {}, // 当前仪表板的跳转信息基础信息
nowPanelJumpInfoTargetPanel: {}, // 当前仪表板的跳转信息(只包括仪表板)
nowPanelTrackInfo: {},
// 当前仪表板的跳转信息基础信息
nowPanelJumpInfo: {},
// 当前仪表板的跳转信息(只包括仪表板)
nowPanelJumpInfoTargetPanel: {},
// 拖拽的组件信息
dragComponentInfo: null,
// 仪表板组件间隙大小 px
componentGap: 5
componentGap: 5,
// 移动端布局状态
mobileLayoutStatus: false,
pcMatrixCount: {
x: 36,
y: 18
},
mobileMatrixCount: {
x: 6,
y: 12
},
mobileLayoutStyle: {
x: 300,
y: 600
}
},
mutations: {
...animation.mutations,
@ -107,32 +128,18 @@ const data = {
state.styleChangeTimes = 0
state.curComponent = component
state.curComponentIndex = index
// console.log('setCurComponent:' + JSON.stringify(component))
},
setCurCanvasScale(state, curCanvasScale) {
state.curCanvasScale = curCanvasScale
},
// setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
// if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
// if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
// if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
// if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
// if (rotate || rotate === 0) curComponent.style.rotate = rotate
// // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
// },
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
// console.log('cw:' + curComponent.style.width + ';w:' + width + ';sp:' + curCanvasScale.scalePointWidth)
const ow = curComponent.style.width
if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
if (rotate || rotate === 0) curComponent.style.rotate = rotate
// console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
// console.log('setShapeStyle:curComponent' + 'w:' + curComponent.style.width + ';ow:' + ow)
},
setShapeSingleStyle({ curComponent }, { key, value }) {
@ -143,6 +150,16 @@ const data = {
Vue.set(state, 'componentData', componentData)
},
setPcComponentData(state, pcComponentData = []) {
Vue.set(state, 'pcComponentData', pcComponentData)
},
setComponentDataCache(state, componentDataCache) {
Vue.set(state, 'componentDataCache', componentDataCache)
},
setMobileComponentData(state, mobileComponentData = []) {
Vue.set(state, 'mobileComponentData', mobileComponentData)
},
addComponent(state, { component, index }) {
if (index !== undefined) {
state.componentData.splice(index, 0, component)
@ -305,6 +322,9 @@ const data = {
bus.$emit('onRemoveLastItem')
}
state.dragComponentInfo = null
},
setMobileLayoutStatus(state, status) {
state.mobileLayoutStatus = status
}
},
modules: {

29
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe653;</span>
<div class="name">移动端</div>
<div class="code-name">&amp;#xe653;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">video</div>
@ -462,9 +468,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1636358286475') format('woff2'),
url('iconfont.woff?t=1636358286475') format('woff'),
url('iconfont.ttf?t=1636358286475') format('truetype');
src: url('iconfont.woff2?t=1636516993563') format('woff2'),
url('iconfont.woff?t=1636516993563') format('woff'),
url('iconfont.ttf?t=1636516993563') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -490,6 +496,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-yidongduan"></span>
<div class="name">
移动端
</div>
<div class="code-name">.icon-yidongduan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-video"></span>
<div class="name">
@ -1102,6 +1117,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yidongduan"></use>
</svg>
<div class="name">移动端</div>
<div class="code-name">#icon-yidongduan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-video"></use>

10
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1636358286475') format('woff2'),
url('iconfont.woff?t=1636358286475') format('woff'),
url('iconfont.ttf?t=1636358286475') format('truetype');
src: url('iconfont.woff2?t=1636516993563') format('woff2'),
url('iconfont.woff?t=1636516993563') format('woff'),
url('iconfont.ttf?t=1636516993563') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-yidongduan:before {
content: "\e653";
}
.icon-video:before {
content: "\e625";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "11799014",
"name": "移动端",
"font_class": "yidongduan",
"unicode": "e653",
"unicode_decimal": 58963
},
{
"icon_id": "5994030",
"name": "video",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

90
frontend/src/views/panel/edit/ComponentWait.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<el-row class="component-wait">
<el-row class="component-wait-title">
隐藏的组件
</el-row>
<el-row class="component-wait-main">
<component-wait-item
v-for="(config, index) in pcComponentData"
v-if="!config.mobileSelected"
:id="'wait' + config.id"
:key="index"
:config="config"
/>
</el-row>
</el-row>
</template>
<script>
import { mapState } from 'vuex'
import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
export default {
name: 'ComponentWait',
components: { ComponentWaitItem },
props: {
template: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
itemWidth: 280,
itemHeight: 200,
outStyle: {
width: this.itemWidth,
height: this.itemHeight
}
}
},
computed: {
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
// 显示条件：1.当前是移动端画布编辑状态
return this.mobileLayoutStatus
},
componentItemStyle() {
return {
padding: '5px',
display: 'inline-block',
width: '33.3333%'
}
},
...mapState([
'mobileLayoutStatus',
'pcComponentData'
])
},
methods: {
}
}
</script>
<style scoped>
.component-wait{
width: 100%;
height: 100%;
}
.component-wait-title {
width: 100%;
height: 30px;
background-color: #9ea6b2;
border-bottom: 1px black;
}
.component-wait-main {
width: 100%;
height: calc(100% - 30px);
overflow-y: auto;
background-color: lightgray;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
</style>

88
frontend/src/views/panel/edit/ComponentWaitItem.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div
v-proportion="0.8"
:style="componentItemStyle"
>
<mobile-check-bar v-if="mobileCheckBarShow" :element="config" />
<de-out-widget
v-if="config.type==='custom'"
:id="'component' + config.id"
class="component-custom"
:out-style="outStyle"
:element="config"
/>
<component
:is="config.component"
v-else
ref="wrapperChild"
:out-style="outStyle"
:prop-value="config.propValue"
:is-edit="false"
:element="config"
:h="itemHeight"
/>
</div>
</template>
<script>
import { mapState } from 'vuex'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
export default {
name: 'ComponentWaitItem',
components: { MobileCheckBar },
props: {
config: {
type: Object,
required: true
}
},
data() {
return {
itemWidth: 280,
itemHeight: 200,
outStyle: {
width: this.itemWidth,
height: this.itemHeight
}
}
},
computed: {
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
// 显示条件：1.当前是移动端画布编辑状态
return this.mobileLayoutStatus
},
componentDataWaite() {
const result = []
this.componentData.forEach(item => {
if (!item.mobileSelected) {
result.push(item)
}
})
return result
},
componentItemStyle() {
return {
padding: '5px',
display: 'inline-block',
width: '33.3333%'
}
},
...mapState([
'mobileLayoutStatus',
'componentData'
])
},
methods: {
}
}
</script>
<style scoped>
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
</style>

186
frontend/src/views/panel/edit/index.vue
View File

@ -21,7 +21,7 @@
<de-container>
<!--左侧导航栏-->
<de-aside-container class="ms-aside-container">
<div v-if="!linkageSettingStatus" style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div v-if="showAside" style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
<!-- 视图图表 start -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
@ -94,11 +94,11 @@
<assist-component v-show=" show &&showIndex===3" />
</el-drawer>
<!--PC端画布区域-->
<div
v-if="!previewVisible"
v-if="!previewVisible&&!mobileLayoutStatus"
id="canvasInfo"
:class="{'style-hidden':canvasStyleData.selfAdaption}"
class="content this_canvas"
class="this_canvas"
:style="customCanvasStyle"
@drop="handleDrop"
@dragover="handleDragOver"
@ -106,14 +106,36 @@
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
>
<Editor ref="canvasEditor" :out-style="outStyle" />
<Editor ref="canvasEditor" :matrix-count="pcMatrixCount" :out-style="outStyle" />
</div>
<!--移动端画布区域 保持宽高比2.5-->
<el-row v-if="mobileLayoutStatus" class="mobile_canvas_main">
<el-col :span="8" class="this_mobile_canvas_cell">
<div
v-proportion="2.5"
:style="customCanvasStyle"
class="this_mobile_canvas"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
>
<el-row class="this_mobile_canvas_top" />
<el-row
id="canvasInfoMobile"
class="this_mobile_canvas_main"
>
<Editor ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" />
</el-row>
<el-row class="this_mobile_canvas_bottom" />
</div>
</el-col>
<el-col :span="16" class="this_mobile_canvas_cell">
<component-wait />
</el-col>
</el-row>
</de-main-container>
<!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
<!-- <AttrListExtend v-if="curComponent" />-->
<!-- <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>-->
<!-- </de-aside-container>-->
</de-container>
<el-dialog
@ -162,9 +184,7 @@
<input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
<!--矩形样式组件-->
<!-- <RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />-->
<TextAttr v-if="showAttr" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
<!-- <FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />-->
<!--复用ChartGroup组件 不做显示-->
<ChartGroup
ref="chartGroup"
@ -188,8 +208,7 @@ import SubjectSetting from '../SubjectSetting'
import bus from '@/utils/bus'
import Editor from '@/components/canvas/components/Editor/index'
import { deepCopy } from '@/components/canvas/utils/utils'
import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
// import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
import componentList, { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
import Toolbar from '@/components/canvas/components/Toolbar'
@ -204,12 +223,9 @@ import AssistComponent from '@/views/panel/AssistComponent'
import PanelTextEditor from '@/components/canvas/custom-component/PanelTextEditor'
import ChartGroup from '@/views/chart/group/Group'
import { searchAdviceSceneId } from '@/api/chart/chart'
// 引入样式
import '@/components/canvas/assets/iconfont/iconfont.css'
import '@/components/canvas/styles/animate.css'
// import '@/components/canvas/styles/reset.css'
import { ApplicationContext } from '@/utils/ApplicationContext'
import FilterDialog from '../filter/filterDialog'
import toast from '@/components/canvas/utils/toast'
@ -219,10 +235,12 @@ import RectangleAttr from '@/components/canvas/components/RectangleAttr'
import TextAttr from '@/components/canvas/components/TextAttr'
import FilterTextAttr from '@/components/canvas/components/FilterTextAttr'
import { queryPanelJumpInfo } from '@/api/panel/linkJump'
import ComponentWait from '@/views/panel/edit/ComponentWait'
export default {
name: 'PanelEdit',
components: {
ComponentWait,
DeMainContainer,
DeContainer,
DeAsideContainer,
@ -296,8 +314,11 @@ export default {
},
computed: {
// 侧边显示控制
showAside() {
return !this.linkageSettingStatus && !this.mobileLayoutStatus
},
showAttr() {
// console.log('showAttr：' + JSON.stringify(this.curComponent))
if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
// 过滤组件有标题才显示
if (this.curComponent.type === 'custom' && !this.curComponent.options.attrs.title) {
@ -327,8 +348,6 @@ export default {
}
}
}
// console.log('customStyle=>' + JSON.stringify(style) + JSON.stringify(this.canvasStyleData))
return style
},
panelInfo() {
@ -343,7 +362,11 @@ export default {
'componentData',
'linkageSettingStatus',
'dragComponentInfo',
'componentGap'
'componentGap',
'mobileLayoutStatus',
'pcMatrixCount',
'mobileMatrixCount',
'mobileLayoutStyle'
])
},
@ -362,11 +385,13 @@ export default {
this.init(newVal.id)
},
'$store.state.styleChangeTimes'() {
// console.log('styleChangeTimes' + this.$store.state.styleChangeTimes)
if (this.$store.state.styleChangeTimes > 0) {
this.destroyTimeMachine()
this.recordStyleChange(this.$store.state.styleChangeTimes)
}
},
mobileLayoutStatus() {
this.restore()
}
},
created() {
@ -424,7 +449,6 @@ export default {
item.sizey = (item.sizey || 5)
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
const temp = JSON.parse(canvasStyleDataTemp)
temp.refreshTime = (temp.refreshTime || 5)
temp.refreshViewLoading = (temp.refreshViewLoading || false)
@ -437,6 +461,7 @@ export default {
} else if (panelId) {
findOne(panelId).then(response => {
const componentDatas = JSON.parse(response.data.panelData)
const mobileComponentData = response.data.panelDataMobile ? JSON.parse(response.data.panelDataMobile) : []
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
@ -445,9 +470,11 @@ export default {
item.y = (item.y || 1)
item.sizex = (item.sizex || 5)
item.sizey = (item.sizey || 5)
item.mobileSelected = (item.mobileSelected || false)
item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
this.$store.commit('setMobileComponentData', this.resetID(mobileComponentData))
const panelStyle = JSON.parse(response.data.panelStyle)
panelStyle.refreshTime = (panelStyle.refreshTime || 5)
panelStyle.refreshViewLoading = (panelStyle.refreshViewLoading || false)
@ -500,14 +527,6 @@ export default {
this.showIndex = -1
}
},
// insertToBody() {
// this.$nextTick(() => {
// const elx = this.$refs.leftPanel
// const body = document.querySelector('body')
// body.insertBefore(elx, body.firstChild)
// })
// },
resetID(data) {
if (data) {
data.forEach(item => {
@ -581,11 +600,6 @@ export default {
}
component = deepCopy(this.currentFilterCom)
}
// position = absolution 或导致有偏移 这里中和一下偏移量
// component.style.top = this.getPositionY(e.layerY)
// component.style.left = this.getPositionX(e.layerX)
if (this.canvasStyleData.auxiliaryMatrix) {
component.x = this.dropComponentInfo.x
component.y = this.dropComponentInfo.y
@ -616,8 +630,6 @@ export default {
},
handleMouseDown() {
// console.log('handleMouseDown123')
this.$store.commit('setClickComponentStatus', false)
},
@ -679,16 +691,17 @@ export default {
return result
},
restore() {
if (document.getElementById('canvasInfo')) {
this.$nextTick(() => {
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
this.outStyle.height = canvasHeight - (this.componentGap * 2)
this.$nextTick(() => {
const domInfo = this.mobileLayoutStatus ? document.getElementById('canvasInfoMobile') : document.getElementById('canvasInfo')
if (domInfo) {
this.outStyle.height = domInfo.offsetHeight - this.getGap()
// 临时处理 确保每次restore 有会更新
this.outStyle.width = canvasWidth - (this.componentGap * 2) + (Math.random() * 0.000001)
// console.log(canvasHeight + '--' + canvasWidth)
})
}
this.outStyle.width = domInfo.offsetWidth - this.getGap() + (Math.random() * 0.000001)
}
})
},
getGap() {
return this.mobileLayoutStatus ? 0 : this.componentGap * 2
},
closeStyleDialog() {
this.styleDialogVisible = false
@ -708,10 +721,6 @@ export default {
const fileResult = res.target.result
const img = new Image()
img.onload = () => {
const scaleWith = img.width / 400
const scaleHeight = img.height / 200
let scale = scaleWith > scaleHeight ? scaleWith : scaleHeight
scale = scale > 1 ? scale : 1
const component = {
...commonAttr,
id: generateID(),
@ -820,7 +829,6 @@ export default {
}
},
canvasScroll(event) {
// console.log('testTop' + event.target.scrollTop)
this.scrollLeft = event.target.scrollLeft
this.scrollTop = event.target.scrollTop
},
@ -917,7 +925,52 @@ export default {
}
}
.mobile_canvas_main{
width: 80%;
height: 90%;
margin-left: 10%;
margin-top: 3%;
}
.this_mobile_canvas{
border-radius:30px;
min-width: 280px;
max-width: 300px;
min-height: 700px;
max-height: 750px;
overflow: hidden;
background-color: #000000;
background-size:100% 100% !important;
}
.this_mobile_canvas_top{
height: 30px;
width: 100%;
}
.this_mobile_canvas_bottom{
height: 30px;
width: 100%;
}
.this_mobile_canvas_main{
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 60px);;
background-color: #d7d9e3;
background-size:100% 100% !important;
}
.this_mobile_canvas_cell{
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.this_canvas{
width: 100%;
height: calc(100vh - 35px);
overflow-x: hidden;
overflow-y: auto;
@ -968,7 +1021,6 @@ export default {
height: 400px!important;
.el-dialog__header{
// background-color: #f4f4f5;
padding: 10px 20px !important;
.el-dialog__headerbtn {
@ -979,11 +1031,31 @@ export default {
padding: 1px 15px !important;
}
}
.style-hidden{
overflow-x: hidden;
}
.style-hidden{
overflow-x: hidden;
}
.button-text {
color: var(--TextActive);
}
.mobile-canvas{
width: 300px;
height: 600px;
}
.info-class{
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
font-size: 12px;
color: #9ea6b2;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
</style>

15
frontend/src/views/panel/list/PanelList.vue
View File

@ -22,19 +22,6 @@
<el-dropdown-item @click.native="searchTypeClick('folder')">目录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-select-->
<!-- v-model="searchType"-->
<!-- default-first-option-->
<!-- size="mini"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in searchTypeList"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"-->
<!-- />-->
<!-- </el-select>-->
</el-col>
</el-row>
<el-row>
@ -246,7 +233,6 @@ import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector'
import { post } from '@/api/chart/chart'
export default {
name: 'PanelList',
@ -637,7 +623,6 @@ export default {
item.sizey = (item.sizey || 5)
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))
const temp = JSON.parse(response.data.panelStyle)
temp.refreshTime = (temp.refreshTime || 5)
temp.refreshViewLoading = (temp.refreshViewLoading || false)

2
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -23,7 +23,7 @@
<span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
</el-col>
<el-col :span="12">
<span v-if="hasDataPermission('edit',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
<span v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'" style="float: right;margin-right: 10px">
<el-button size="mini" type="primary" @click="editPanel">
{{ $t('commons.edit') }}
</el-button>