Skip to content

D
dataease
提交 50bf35bc authored 作者: taojinlong's avatar taojinlong
浏览文件
操作

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

上级 86b81f6a 16e807bc
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 565 行增加 和 200 行删除
frontend/package.json
浏览文件 @ 50bf35bc
...@@ -49,6 +49,7 @@ ...@@ -49,6 +49,7 @@
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-fullscreen": "^2.5.2", "vue-fullscreen": "^2.5.2",
"vue-i18n": "7.3.2", "vue-i18n": "7.3.2",
"vue-proportion-directive": "^1.1.0",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vue-to-pdf": "^1.0.0", "vue-to-pdf": "^1.0.0",
"vue-uuid": "2.0.2", "vue-uuid": "2.0.2",
......
frontend/src/components/DeDrag/index.vue
浏览文件 @ 50bf35bc
...@@ -29,7 +29,8 @@ ...@@ -29,7 +29,8 @@
]" ]"
:style="mainSlotStyle" :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-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div <div
v-for="(handlei, indexi) in actualHandles" v-for="(handlei, indexi) in actualHandles"
...@@ -55,13 +56,13 @@ let eventsFor = events.mouse ...@@ -55,13 +56,13 @@ let eventsFor = events.mouse
// private // private
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import EditBar from '@/components/canvas/components/Editor/EditBar' import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
export default { export default {
replace: true, replace: true,
name: 'Dedrag', name: 'Dedrag',
components: { EditBar }, components: { EditBar, MobileCheckBar },
props: { props: {
className: { className: {
type: String, type: String,
...@@ -362,10 +363,8 @@ export default { ...@@ -362,10 +363,8 @@ export default {
// 新增 保存中心点位置，用于计算旋转的方向矢量 // 新增 保存中心点位置，用于计算旋转的方向矢量
lastCenterX: 0, lastCenterX: 0,
lastCenterY: 0, lastCenterY: 0,
//
parentX: 0, parentX: 0,
parentY: 0, parentY: 0,
// private // private
// 鼠标移入事件 // 鼠标移入事件
mouseOn: false, mouseOn: false,
...@@ -374,6 +373,16 @@ export default { ...@@ -374,6 +373,16 @@ export default {
} }
}, },
computed: { 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() { handleStyle() {
return (stick, index) => { return (stick, index) => {
if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' } if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
...@@ -534,6 +543,7 @@ export default { ...@@ -534,6 +543,7 @@ export default {
'curCanvasScale', 'curCanvasScale',
'canvasStyleData', 'canvasStyleData',
'linkageSettingStatus', 'linkageSettingStatus',
'mobileLayoutStatus',
'componentGap' 'componentGap'
]) ])
}, },
......
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
浏览文件 @ 50bf35bc
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
@click="handleClick" @click="handleClick"
@mousedown="elementMouseDown" @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 <de-out-widget
v-if="config.type==='custom'" v-if="config.type==='custom'"
:id="'component' + config.id" :id="'component' + config.id"
...@@ -15,7 +15,6 @@ ...@@ -15,7 +15,6 @@
:element="config" :element="config"
:in-screen="inScreen" :in-screen="inScreen"
/> />
<component <component
:is="config.component" :is="config.component"
v-else v-else
...@@ -38,9 +37,10 @@ import { mixins } from '@/components/canvas/utils/events' ...@@ -38,9 +37,10 @@ import { mixins } from '@/components/canvas/utils/events'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import DeOutWidget from '@/components/dataease/DeOutWidget' import DeOutWidget from '@/components/dataease/DeOutWidget'
import EditBar from '@/components/canvas/components/Editor/EditBar' import EditBar from '@/components/canvas/components/Editor/EditBar'
import MobileCheckBar from '@/components/canvas/components/Editor/MobileCheckBar'
export default { export default {
components: { DeOutWidget, EditBar }, components: { MobileCheckBar, DeOutWidget, EditBar },
mixins: [mixins], mixins: [mixins],
props: { props: {
config: { config: {
...@@ -65,10 +65,14 @@ export default { ...@@ -65,10 +65,14 @@ export default {
} }
}, },
computed: { computed: {
editBarShow() {
return this.curComponent && this.config === this.curComponent
},
curGap() { curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0 return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
}, },
...mapState([ ...mapState([
'mobileLayoutStatus',
'canvasStyleData', 'canvasStyleData',
'curComponent', 'curComponent',
'componentGap' 'componentGap'
...@@ -79,7 +83,6 @@ export default { ...@@ -79,7 +83,6 @@ export default {
}, },
methods: { methods: {
getStyle, getStyle,
getShapeStyleIntDeDrag(style, prop) { getShapeStyleIntDeDrag(style, prop) {
if (prop === 'rotate') { if (prop === 'rotate') {
return style['rotate'] return style['rotate']
...@@ -95,7 +98,6 @@ export default { ...@@ -95,7 +98,6 @@ export default {
} }
if (prop === 'top') { if (prop === 'top') {
const top = this.format(style['top'], this.scaleHeight) const top = this.format(style['top'], this.scaleHeight)
// console.log('top:' + top)
return top return top
} }
}, },
...@@ -106,7 +108,12 @@ export default { ...@@ -106,7 +108,12 @@ export default {
getOutStyleDefault(style) { getOutStyleDefault(style) {
const result = { const result = {
padding: this.curGap + 'px' padding: this.curGap + 'px'
}; }
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
if (this.mobileLayoutStatus && !this.config.mobileSelected) {
result.width = '100%'
result.height = '100%'
} else {
['width', 'left'].forEach(attr => { ['width', 'left'].forEach(attr => {
result[attr] = style[attr] + 'px' result[attr] = style[attr] + 'px'
}); });
...@@ -114,17 +121,20 @@ export default { ...@@ -114,17 +121,20 @@ export default {
result[attr] = style[attr] + 'px' result[attr] = style[attr] + 'px'
}) })
result['rotate'] = style['rotate'] result['rotate'] = style['rotate']
// result['opacity'] = style['opacity'] }
return result return result
// return style
}, },
getComponentStyleDefault(style) { getComponentStyleDefault(style) {
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
if (this.mobileLayoutStatus && !this.config.mobileSelected) {
return {
width: '100%',
height: '100%'
}
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate']) return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// console.log('styleInfo', JSON.stringify(styleInfo)) }
// return styleInfo
// return style
}, },
handleClick() { handleClick() {
...@@ -151,19 +161,21 @@ export default { ...@@ -151,19 +161,21 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.component { .component {
position: absolute; position: absolute;
} }
.component:hover { .component:hover {
box-shadow:0px 0px 7px #0a7be0; box-shadow: 0px 0px 7px #0a7be0;
} }
.gap_class{
padding:5px; .gap_class {
} padding: 5px;
.component-custom { }
.component-custom {
outline: none; outline: none;
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
} }
</style> </style>
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ 50bf35bc
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
<div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px"> <div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
<el-checkbox v-model="linkageInfo.linkageActive" /> <el-checkbox v-model="linkageInfo.linkageActive" />
<linkage-field v-if="linkageInfo.linkageActive" :element="element" /> <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
<!-- <i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />-->
</div> </div>
<div v-else-if="!linkageSettingStatus"> <div v-else-if="!linkageSettingStatus">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet"> <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet">
...@@ -26,9 +25,6 @@ ...@@ -26,9 +25,6 @@
<span :title="$t('panel.cancel_linkage')"> <span :title="$t('panel.cancel_linkage')">
<i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" /> <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
</span> </span>
<!-- <spa>-->
<!-- {{ curComponent.x }}-{{ curComponent.y }}&#45;&#45;{{ curComponent.sizex }}-{{ curComponent.sizey }}-->
<!-- </spa>-->
</div> </div>
</div> </div>
...@@ -39,7 +35,6 @@ import { mapState } from 'vuex' ...@@ -39,7 +35,6 @@ import { mapState } from 'vuex'
import bus from '@/utils/bus' import bus from '@/utils/bus'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu' import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import LinkageField from '@/components/canvas/components/Editor/LinkageField' import LinkageField from '@/components/canvas/components/Editor/LinkageField'
import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
components: { SettingMenu, LinkageField }, components: { SettingMenu, LinkageField },
...@@ -73,7 +68,6 @@ export default { ...@@ -73,7 +68,6 @@ export default {
} }
}, },
mounted() { mounted() {
// this.createTimer()
}, },
computed: { computed: {
existLinkage() { existLinkage() {
...@@ -106,7 +100,6 @@ export default { ...@@ -106,7 +100,6 @@ export default {
]) ])
}, },
beforeDestroy() { beforeDestroy() {
// this.destroyTimer()
}, },
methods: { methods: {
createTimer() { createTimer() {
...@@ -172,9 +165,7 @@ export default { ...@@ -172,9 +165,7 @@ export default {
if (this.curComponent.type === 'custom') { if (this.curComponent.type === 'custom') {
bus.$emit('component-dialog-edit') bus.$emit('component-dialog-edit')
} }
// 编辑样式组件 // 编辑样式组件
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') { if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
bus.$emit('component-dialog-style') bus.$emit('component-dialog-style')
} }
......
frontend/src/components/canvas/components/Editor/MobileCheckBar.vue 0 → 100644
浏览文件 @ 50bf35bc
<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>
frontend/src/components/canvas/components/Editor/Preview.vue
浏览文件 @ 50bf35bc
<template> <template>
<div id="canvasInfoMain" ref="canvasInfoMain" :style="customStyle" class="bg"> <div class="bg" :style="customStyle">
<div id="canvasInfoTemp" ref="canvasInfoTemp" class="main-class" @mouseup="deselectCurComponent" @mousedown="handleMouseDown"> <div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%">
<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"> <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }} {{ $t('panel.panelNull') }}
</el-row> </el-row>
...@@ -30,6 +37,7 @@ ...@@ -30,6 +37,7 @@
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -94,9 +102,7 @@ export default { ...@@ -94,9 +102,7 @@ export default {
}, },
computed: { computed: {
customStyle() { customStyle() {
let style = { let style = {}
padding: this.componentGap + 'px'
}
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = { style = {
...@@ -110,16 +116,6 @@ export default { ...@@ -110,16 +116,6 @@ export default {
} }
} }
} }
// if (this.canvasStyleData.selfAdaption) {
// style = {
// overflow: 'hidden',
// ...style
// }
// }
// style = {
// overflow-x :'hidden',
// ...style
// }
return style return style
}, },
// 此处单独计算componentData的值 不放入全局mapState中 // 此处单独计算componentData的值 不放入全局mapState中
...@@ -152,17 +148,17 @@ export default { ...@@ -152,17 +148,17 @@ export default {
const _this = this const _this = this
const erd = elementResizeDetectorMaker() const erd = elementResizeDetectorMaker()
// 监听div变动事件 // 监听div变动事件
const tempDom = document.getElementById('canvasInfoMain') const mainDom = document.getElementById('canvasInfoMain')
erd.listenTo(tempDom, element => { erd.listenTo(mainDom, element => {
_this.$nextTick(() => { _this.$nextTick(() => {
_this.restore() _this.restore()
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题 // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempDom.scrollHeight + 'px!important' _this.mainHeight = mainDom.scrollHeight + 'px!important'
}) })
}) })
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog) eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
this.$store.commit('clearLinkageSettingInfo', false) _this.$store.commit('clearLinkageSettingInfo', false)
this.canvasStyleDataInit() _this.canvasStyleDataInit()
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer) clearInterval(this.timer)
...@@ -235,8 +231,6 @@ export default { ...@@ -235,8 +231,6 @@ export default {
} }
}, },
handleMouseDown() { handleMouseDown() {
// console.log('handleMouseDown123')
this.$store.commit('setClickComponentStatus', false) this.$store.commit('setClickComponentStatus', false)
} }
} }
...@@ -244,28 +238,22 @@ export default { ...@@ -244,28 +238,22 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bg { .bg {
padding: 5px;
min-width: 600px; min-width: 600px;
min-height: 300px; min-height: 300px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
/*border: 1px solid #E6E6E6;*/
background-size: 100% 100% !important; background-size: 100% 100% !important;
.canvas-container {
width: 100%;
height: 100%;
.canvas {
position: relative;
margin: auto;
} }
}
} .main-class {
.main-class {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.custom-position {
.custom-position {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -273,18 +261,22 @@ export default { ...@@ -273,18 +261,22 @@ export default {
font-size: 14px; font-size: 14px;
flex-flow: row nowrap; flex-flow: row nowrap;
color: #9ea6b2; color: #9ea6b2;
} }
.gap_class{
padding:5px; .gap_class {
} padding: 5px;
.dialog-css>>>.el-dialog__title { }
.dialog-css > > > .el-dialog__title {
font-size: 14px; font-size: 14px;
} }
.dialog-css >>> .el-dialog__header {
.dialog-css > > > .el-dialog__header {
padding: 20px 20px 0; padding: 20px 20px 0;
} }
.dialog-css >>> .el-dialog__body {
.dialog-css > > > .el-dialog__body {
padding: 10px 20px 20px; padding: 10px 20px 20px;
} }
</style> </style>
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ 50bf35bc
<template> <template>
<div> <div>
<!-- linkageActiveStatus:{{ linkageActiveStatus }}--> <div v-if="editControlButton" class="toolbar">
<div v-if="linkageSettingStatus" class="toolbar">
<span style="float: right;"> <span style="float: right;">
<el-button size="mini" @click="saveLinkage"> <el-button size="mini" @click="editSave">
{{ $t('commons.confirm') }} {{ $t('commons.confirm') }}
</el-button> </el-button>
<el-button size="mini" @click="cancelLinkage"> <el-button size="mini" @click="editCancel">
{{ $t('commons.cancel') }} {{ $t('commons.cancel') }}
</el-button> </el-button>
</span> </span>
</div> </div>
<div v-else class="toolbar"> <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-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-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
</el-tooltip> </el-tooltip>
<el-tooltip v-if="canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.matrix')"> <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-button class="icon iconfont-tb icon-shujujuzhen" size="mini" circle @click="auxiliaryMatrixChange" />
</el-tooltip> </el-tooltip>
<el-tooltip :content="$t('panel.style')"> <el-tooltip :content="$t('panel.style')">
<el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" /> <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>
<!-- <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-tooltip :content="$t('panel.undo') ">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" /> <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
</el-tooltip> </el-tooltip>
...@@ -44,7 +35,6 @@ ...@@ -44,7 +35,6 @@
<el-tooltip :content="$t('panel.fullscreen_preview')"> <el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" /> <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip> </el-tooltip>
<span style="float: right;margin-left: 10px"> <span style="float: right;margin-left: 10px">
<el-button size="mini" :disabled="changeTimes===0||snapshotIndex===lastSaveSnapshotIndex" @click="save(false)"> <el-button size="mini" :disabled="changeTimes===0||snapshotIndex===lastSaveSnapshotIndex" @click="save(false)">
{{ $t('commons.save') }} {{ $t('commons.save') }}
...@@ -81,7 +71,7 @@ import toast from '@/components/canvas/utils/toast' ...@@ -81,7 +71,7 @@ import toast from '@/components/canvas/utils/toast'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import eventBus from '@/components/canvas/utils/eventBus' 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 { panelSave } from '@/api/panel/panel'
import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage' import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
import bus from '@/utils/bus' import bus from '@/utils/bus'
...@@ -89,7 +79,7 @@ import bus from '@/utils/bus' ...@@ -89,7 +79,7 @@ import bus from '@/utils/bus'
import { import {
DEFAULT_COMMON_CANVAS_STYLE_STRING DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel' } from '@/views/panel/panel'
import {queryPanelJumpInfo} from "@/api/panel/linkJump"; import { queryPanelJumpInfo } from '@/api/panel/linkJump'
export default { export default {
name: 'Toolbar', name: 'Toolbar',
...@@ -114,7 +104,11 @@ export default { ...@@ -114,7 +104,11 @@ export default {
closePanelVisible: false closePanelVisible: false
} }
}, },
computed: mapState([ computed: {
editControlButton() {
return this.linkageSettingStatus || this.mobileLayoutStatus
},
...mapState([
'componentData', 'componentData',
'canvasStyleData', 'canvasStyleData',
'areaData', 'areaData',
...@@ -124,17 +118,18 @@ export default { ...@@ -124,17 +118,18 @@ export default {
'lastSaveSnapshotIndex', 'lastSaveSnapshotIndex',
'linkageSettingStatus', 'linkageSettingStatus',
'curLinkageView', 'curLinkageView',
'targetLinkageInfo' 'targetLinkageInfo',
]), 'mobileLayoutStatus',
'mobileComponentData',
'componentDataCache'
])
},
created() { created() {
eventBus.$on('preview', this.preview) eventBus.$on('preview', this.preview)
eventBus.$on('save', this.save) eventBus.$on('save', this.save)
eventBus.$on('clearCanvas', this.clearCanvas) eventBus.$on('clearCanvas', this.clearCanvas)
this.scale = this.canvasStyleData.scale this.scale = this.canvasStyleData.scale
}, },
methods: { methods: {
close() { close() {
// 关闭页面清理缓存 // 关闭页面清理缓存
...@@ -158,13 +153,11 @@ export default { ...@@ -158,13 +153,11 @@ export default {
const scale = this.scale const scale = this.scale
return value * scale / 100 return value * scale / 100
}, },
getOriginStyle(value) { getOriginStyle(value) {
const scale = this.canvasStyleData.scale const scale = this.canvasStyleData.scale
const result = value / (scale / 100) const result = value / (scale / 100)
return result return result
}, },
handleScaleChange() { handleScaleChange() {
clearTimeout(this.timer) clearTimeout(this.timer)
setTimeout(() => { setTimeout(() => {
...@@ -178,7 +171,6 @@ export default { ...@@ -178,7 +171,6 @@ export default {
} }
}) })
}) })
this.$store.commit('setComponentData', componentData) this.$store.commit('setComponentData', componentData)
this.$store.commit('setCanvasStyle', { this.$store.commit('setCanvasStyle', {
...this.canvasStyleData, ...this.canvasStyleData,
...@@ -216,13 +208,13 @@ export default { ...@@ -216,13 +208,13 @@ export default {
showPanel() { showPanel() {
this.$emit('showPanel', 2) this.$emit('showPanel', 2)
}, },
handleFileChange(e) { handleFileChange(e) {
const file = e.target.files[0] const file = e.target.files[0]
if (!file.type.includes('image')) { if (!file.type.includes('image')) {
toast('只能插入图片') toast('只能插入图片')
return return
} }
const reader = new FileReader() const reader = new FileReader()
reader.onload = (res) => { reader.onload = (res) => {
const fileResult = res.target.result const fileResult = res.target.result
...@@ -249,10 +241,8 @@ export default { ...@@ -249,10 +241,8 @@ export default {
} }
} }
}) })
this.$store.commit('recordSnapshot', 'handleFileChange') this.$store.commit('recordSnapshot', 'handleFileChange')
} }
img.src = fileResult img.src = fileResult
} }
...@@ -267,7 +257,6 @@ export default { ...@@ -267,7 +257,6 @@ export default {
save(withClose) { save(withClose) {
// 清理联动信息 // 清理联动信息
this.$store.commit('clearPanelLinkageInfo') this.$store.commit('clearPanelLinkageInfo')
// 保存到数据库 // 保存到数据库
const requestInfo = { const requestInfo = {
id: this.$store.state.panel.panelInfo.id, id: this.$store.state.panel.panelInfo.id,
...@@ -307,7 +296,6 @@ export default { ...@@ -307,7 +296,6 @@ export default {
}, },
saveLinkage() { saveLinkage() {
// 字段检查 // 字段检查
// let checkCount = 0
for (const key in this.targetLinkageInfo) { for (const key in this.targetLinkageInfo) {
let subCheckCount = 0 let subCheckCount = 0
const linkageInfo = this.targetLinkageInfo[key] const linkageInfo = this.targetLinkageInfo[key]
...@@ -329,15 +317,6 @@ export default { ...@@ -329,15 +317,6 @@ export default {
return return
} }
} }
// if (checkCount > 0) {
// this.$message({
// message: this.$t('panel.exit_un_march_linkage_field'),
// type: 'error',
// showClose: true
// })
// return
// }
const request = { const request = {
panelId: this.$store.state.panel.panelInfo.id, panelId: this.$store.state.panel.panelInfo.id,
sourceViewId: this.curLinkageView.propValue.viewId, sourceViewId: this.curLinkageView.propValue.viewId,
...@@ -355,6 +334,10 @@ export default { ...@@ -355,6 +334,10 @@ export default {
}) })
}) })
}, },
cancelMobileLayoutStatue(sourceComponentData) {
this.$store.commit('setComponentData', sourceComponentData)
this.$store.commit('setMobileLayoutStatus', false)
},
cancelLinkage() { cancelLinkage() {
this.cancelLinkageSettingStatus() this.cancelLinkageSettingStatus()
}, },
...@@ -363,6 +346,57 @@ export default { ...@@ -363,6 +346,57 @@ export default {
}, },
auxiliaryMatrixChange() { auxiliaryMatrixChange() {
this.canvasStyleData.auxiliaryMatrix = !this.canvasStyleData.auxiliaryMatrix 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 { ...@@ -374,9 +408,6 @@ export default {
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
min-width: 400px; min-width: 400px;
/*background: #fff;*/
/*border-bottom: 1px solid #ddd;*/
.canvas-config { .canvas-config {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
...@@ -439,7 +470,6 @@ export default { ...@@ -439,7 +470,6 @@ export default {
>>>.el-switch__core{ >>>.el-switch__core{
width:30px!important; width:30px!important;
height:15px; height:15px;
/*color:#409EFF;*/
} }
/*设置圆*/ /*设置圆*/
>>>.el-switch__core::after{ >>>.el-switch__core::after{
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 50bf35bc
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
'rect-shape' '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 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;"> <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
{{ message }},{{ $t('chart.chart_show_error') }} {{ message }},{{ $t('chart.chart_show_error') }}
...@@ -18,7 +17,6 @@ ...@@ -18,7 +17,6 @@
</div> </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 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-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" /> <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" /> <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;"> <div style="position: absolute;left: 20px;bottom:14px;">
...@@ -132,7 +130,6 @@ export default { ...@@ -132,7 +130,6 @@ export default {
}) })
this.chart.data && this.chart.data.sourceFields && this.chart.data.sourceFields.forEach(item => { this.chart.data && this.chart.data.sourceFields && this.chart.data.sourceFields.forEach(item => {
const sourceInfo = this.chart.id + '#' + item.id const sourceInfo = this.chart.id + '#' + item.id
// console.log('nowPanelJumpInfo=>' + JSON.stringify(this.nowPanelJumpInfo))
if (this.nowPanelJumpInfo[sourceInfo]) { if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++ jumpCount++
} }
...@@ -140,7 +137,6 @@ export default { ...@@ -140,7 +137,6 @@ export default {
jumpCount && trackMenuInfo.push('jump') jumpCount && trackMenuInfo.push('jump')
linkageCount && trackMenuInfo.push('linkage') linkageCount && trackMenuInfo.push('linkage')
this.drillFields.length && trackMenuInfo.push('drill') this.drillFields.length && trackMenuInfo.push('drill')
// console.log('trackMenuInfo' + JSON.stringify(trackMenuInfo))
return trackMenuInfo return trackMenuInfo
}, },
chartType() { chartType() {
...@@ -158,12 +154,10 @@ export default { ...@@ -158,12 +154,10 @@ export default {
watch: { watch: {
'filters': function(val1, val2) { 'filters': function(val1, val2) {
// this.getData(this.element.propValue.viewId)
isChange(val1, val2) && this.getData(this.element.propValue.viewId) isChange(val1, val2) && this.getData(this.element.propValue.viewId)
}, },
linkageFilters: { linkageFilters: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
// isChange(newVal, oldVal) && this.getData(this.element.propValue.viewId)
if (isChange(newVal, oldVal)) { if (isChange(newVal, oldVal)) {
this.getData(this.element.propValue.viewId) this.getData(this.element.propValue.viewId)
} }
...@@ -173,7 +167,6 @@ export default { ...@@ -173,7 +167,6 @@ export default {
// deep监听panel 如果改变 提交到 store // deep监听panel 如果改变 提交到 store
canvasStyleData: { canvasStyleData: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
// this.chart.stylePriority == panel 优先使用仪表板样式
this.mergeStyle() this.mergeStyle()
}, },
deep: true deep: true
...@@ -215,7 +208,6 @@ export default { ...@@ -215,7 +208,6 @@ export default {
created() { created() {
this.refId = uuid.v1 this.refId = uuid.v1
// this.filter.filter = this.$store.getters.conditions
if (this.element && this.element.propValue && this.element.propValue.viewId) { if (this.element && this.element.propValue && this.element.propValue.viewId) {
this.getData(this.element.propValue.viewId) this.getData(this.element.propValue.viewId)
} }
...@@ -226,7 +218,6 @@ export default { ...@@ -226,7 +218,6 @@ export default {
}, },
methods: { methods: {
mergeStyle() { mergeStyle() {
// this.chart.stylePriority == panel 优先使用仪表板样式
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) { if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
const customAttrChart = JSON.parse(this.chart.customAttr) const customAttrChart = JSON.parse(this.chart.customAttr)
const customStyleChart = JSON.parse(this.chart.customStyle) const customStyleChart = JSON.parse(this.chart.customStyle)
...@@ -235,7 +226,6 @@ export default { ...@@ -235,7 +226,6 @@ export default {
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle) const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
// 组件样式-标题设置 - 标题修改为组件自己控制 // 组件样式-标题设置 - 标题修改为组件自己控制
// customStyleChart.text = customStylePanel.text
// 组件样式-背景设置 // 组件样式-背景设置
customStyleChart.background = customStylePanel.background customStyleChart.background = customStylePanel.background
// 图形属性-颜色设置 // 图形属性-颜色设置
...@@ -368,7 +358,6 @@ export default { ...@@ -368,7 +358,6 @@ export default {
showClose: true showClose: true
}) })
} }
// console.log('param=>' + JSON.stringify(param))
}, },
resetDrill() { resetDrill() {
...@@ -404,7 +393,6 @@ export default { ...@@ -404,7 +393,6 @@ export default {
this.currentAcreaNode = tempNode this.currentAcreaNode = tempNode
const current = this.$refs[this.element.propValue.id] const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(this.currentAcreaNode.code) 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 { ...@@ -415,12 +403,10 @@ export default {
if (this.currentAcreaNode) { if (this.currentAcreaNode) {
aCode = this.currentAcreaNode.code aCode = this.currentAcreaNode.code
} }
// const aCode = this.currentAcreaNode ? this.currentAcreaNode.code : null
const customAttr = JSON.parse(this.chart.customAttr) const customAttr = JSON.parse(this.chart.customAttr)
const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places) const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places)
if (currentNode && currentNode.children && currentNode.children.length > 0) { if (currentNode && currentNode.children && currentNode.children.length > 0) {
const nextNode = currentNode.children.find(item => item.name === name) const nextNode = currentNode.children.find(item => item.name === name)
// this.view.customAttr.areaCode = nextNode.code
this.currentAcreaNode = nextNode this.currentAcreaNode = nextNode
const current = this.$refs[this.element.propValue.id] const current = this.$refs[this.element.propValue.id]
current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code) current && current.registerDynamicMap && current.registerDynamicMap(nextNode.code)
...@@ -439,14 +425,8 @@ export default { ...@@ -439,14 +425,8 @@ export default {
} }
}, },
initAreas() { initAreas() {
// let mapping
// if ((mapping = localStorage.getItem('areaMapping')) !== null) {
// this.places = JSON.parse(mapping)
// return
// }
Object.keys(this.places).length === 0 && areaMapping().then(res => { Object.keys(this.places).length === 0 && areaMapping().then(res => {
this.places = res.data this.places = res.data
// localStorage.setItem('areaMapping', JSON.stringify(res.data))
}) })
}, },
doMapLink(linkFilters) { doMapLink(linkFilters) {
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 50bf35bc
// 基础移动端定位样式
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 = { export const commonStyle = {
rotate: 0, rotate: 0,
...@@ -90,7 +104,7 @@ export const pictureList = [ ...@@ -90,7 +104,7 @@ export const pictureList = [
id: '20001', id: '20001',
component: 'picture-add', component: 'picture-add',
type: 'picture-add', type: 'picture-add',
label: '拖拽上传', label: '图片',
icon: 'iconfont icon-picture', icon: 'iconfont icon-picture',
defaultClass: 'text-filter' defaultClass: 'text-filter'
}, },
...@@ -124,6 +138,7 @@ const list = [ ...@@ -124,6 +138,7 @@ const list = [
propValue: '双击输入文字', propValue: '双击输入文字',
icon: 'wenben', icon: 'wenben',
type: 'v-text', type: 'v-text',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 400, width: 400,
height: 100, height: 100,
...@@ -150,6 +165,7 @@ const list = [ ...@@ -150,6 +165,7 @@ const list = [
propValue: '按钮', propValue: '按钮',
icon: 'button', icon: 'button',
type: 'v-button', type: 'v-button',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 100, width: 100,
height: 34, height: 34,
...@@ -172,6 +188,7 @@ const list = [ ...@@ -172,6 +188,7 @@ const list = [
icon: 'tupian', icon: 'tupian',
type: 'Picture', type: 'Picture',
propValue: require('@/components/canvas/assets/title.jpg'), propValue: require('@/components/canvas/assets/title.jpg'),
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 300, width: 300,
height: 200, height: 200,
...@@ -189,6 +206,7 @@ const list = [ ...@@ -189,6 +206,7 @@ const list = [
icon: 'tupian', icon: 'tupian',
type: 'Picture', type: 'Picture',
propValue: require('@/components/canvas/assets/bg-kj-1.jpg'), propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
borderStyle: 'solid', borderStyle: 'solid',
borderWidth: 0, borderWidth: 0,
...@@ -204,6 +222,7 @@ const list = [ ...@@ -204,6 +222,7 @@ const list = [
propValue: '', propValue: '',
icon: 'juxing', icon: 'juxing',
type: 'rect-shape', type: 'rect-shape',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 300, width: 300,
height: 200, height: 200,
...@@ -225,6 +244,7 @@ const list = [ ...@@ -225,6 +244,7 @@ const list = [
propValue: '', propValue: '',
icon: 'juxing', icon: 'juxing',
type: 'view', type: 'view',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 300, width: 300,
height: 200, height: 200,
...@@ -243,6 +263,7 @@ const list = [ ...@@ -243,6 +263,7 @@ const list = [
propValue: '', propValue: '',
icon: 'tabs', icon: 'tabs',
type: 'de-tabs', type: 'de-tabs',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 200, width: 200,
height: 200, height: 200,
...@@ -271,6 +292,7 @@ const list = [ ...@@ -271,6 +292,7 @@ const list = [
propValue: '', propValue: '',
icon: 'shijian', icon: 'shijian',
type: 'de-show-date', type: 'de-show-date',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 250, width: 250,
height: 100, height: 100,
...@@ -304,9 +326,10 @@ const list = [ ...@@ -304,9 +326,10 @@ const list = [
id: '20001', id: '20001',
component: 'picture-add', component: 'picture-add',
type: 'picture-add', type: 'picture-add',
label: '拖拽上传', label: '图片',
icon: 'iconfont icon-picture', icon: 'iconfont icon-picture',
defaultClass: 'text-filter', defaultClass: 'text-filter',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 400, width: 400,
height: 200, height: 200,
...@@ -324,6 +347,7 @@ const list = [ ...@@ -324,6 +347,7 @@ const list = [
label: '', label: '',
icon: 'iconfont icon-picture', icon: 'iconfont icon-picture',
defaultClass: 'text-filter', defaultClass: 'text-filter',
mobileStyle: BASE_MOBILE_STYLE,
style: { style: {
width: 400, width: 400,
height: 200, height: 200,
......
frontend/src/components/canvas/utils/utils.js
浏览文件 @ 50bf35bc
...@@ -37,7 +37,21 @@ export function toTop(arr, i, j) { ...@@ -37,7 +37,21 @@ export function toTop(arr, i, j) {
export function toBottom(arr, i) { export function toBottom(arr, i) {
arr.unshift(arr.splice(i, 1)[0]) arr.unshift(arr.splice(i, 1)[0])
} }
export function $(selector) { export function $(selector) {
return document.querySelector(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
}
frontend/src/components/dataease/DeOutWidget.vue
浏览文件 @ 50bf35bc
<template> <template>
<div class="outside-container">
<div ref="myContainer" class="my-container"> <div ref="myContainer" class="my-container">
<div ref="conditionMain" class="condition-main" :class="mainClass"> <div ref="conditionMain" class="condition-main" :class="mainClass">
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title"> <div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -97,12 +99,16 @@ export default { ...@@ -97,12 +99,16 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.outside-container {
width: 100%;
height: 100%;
}
.my-container { .my-container {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
inset: 0px; inset: 0px;
} }
.ccondition-main { .condition-main {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
inset: 0px; inset: 0px;
......
frontend/src/main.js
浏览文件 @ 50bf35bc
...@@ -83,11 +83,13 @@ import vueToPdf from 'vue-to-pdf' ...@@ -83,11 +83,13 @@ import vueToPdf from 'vue-to-pdf'
Vue.use(vueToPdf) Vue.use(vueToPdf)
import VueVideoPlayer from 'vue-video-player' import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
Vue.use(VueVideoPlayer) Vue.use(VueVideoPlayer)
// 控制标签宽高成比例的指令
import proportion from 'vue-proportion-directive'
Vue.use(proportion)
Vue.prototype.hasDataPermission = function(pTarget, pSource) { Vue.prototype.hasDataPermission = function(pTarget, pSource) {
if (this.$store.state.user.user.isAdmin) { if (this.$store.state.user.user.isAdmin) {
return true return true
......
frontend/src/store/index.js
浏览文件 @ 50bf35bc
...@@ -41,10 +41,19 @@ const data = { ...@@ -41,10 +41,19 @@ const data = {
...layer.state, ...layer.state,
...snapshot.state, ...snapshot.state,
...lock.state, ...lock.state,
// 编辑器模式 edit preview
editMode: 'edit', // 编辑器模式 edit preview editMode: 'edit',
canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING, // 页面全局数据 //扩展公共样式 公共的仪表板样式，用来实时响应样式的变化 // 当前页面全局数据 包括扩展公共样式 公共的仪表板样式，用来实时响应样式的变化
componentData: [], // 画布组件数据 canvasStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
// 当前展示画布缓存数据
componentDataCache: null,
// 当前展示画布组件数据
componentData: [],
// PC布局画布组件数据
pcComponentData: [],
// 移动端布局画布组件数据
mobileComponentData: [],
// 当前点击组件
curComponent: null, curComponent: null,
curCanvasScale: null, curCanvasScale: null,
curComponentIndex: null, curComponentIndex: null,
...@@ -59,17 +68,29 @@ const data = { ...@@ -59,17 +68,29 @@ const data = {
// 和当前组件联动的目标组件 // 和当前组件联动的目标组件
targetLinkageInfo: [], targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息 // 当前仪表板联动 下钻 上卷等信息
nowPanelTrackInfo: {}, // 当前仪表板联动 下钻 上卷等信息 nowPanelTrackInfo: {},
// 当前仪表板的跳转信息基础信息
nowPanelJumpInfo: {}, // 当前仪表板的跳转信息基础信息 nowPanelJumpInfo: {},
// 当前仪表板的跳转信息(只包括仪表板)
nowPanelJumpInfoTargetPanel: {}, // 当前仪表板的跳转信息(只包括仪表板) nowPanelJumpInfoTargetPanel: {},
// 拖拽的组件信息 // 拖拽的组件信息
dragComponentInfo: null, dragComponentInfo: null,
// 仪表板组件间隙大小 px // 仪表板组件间隙大小 px
componentGap: 5 componentGap: 5,
// 移动端布局状态
mobileLayoutStatus: false,
pcMatrixCount: {
x: 36,
y: 18
},
mobileMatrixCount: {
x: 6,
y: 12
},
mobileLayoutStyle: {
x: 300,
y: 600
}
}, },
mutations: { mutations: {
...animation.mutations, ...animation.mutations,
...@@ -107,32 +128,18 @@ const data = { ...@@ -107,32 +128,18 @@ const data = {
state.styleChangeTimes = 0 state.styleChangeTimes = 0
state.curComponent = component state.curComponent = component
state.curComponentIndex = index state.curComponentIndex = index
// console.log('setCurComponent:' + JSON.stringify(component))
}, },
setCurCanvasScale(state, curCanvasScale) { setCurCanvasScale(state, curCanvasScale) {
state.curCanvasScale = 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 }) { 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 (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 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 (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001 if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
if (rotate || rotate === 0) curComponent.style.rotate = rotate 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 }) { setShapeSingleStyle({ curComponent }, { key, value }) {
...@@ -143,6 +150,16 @@ const data = { ...@@ -143,6 +150,16 @@ const data = {
Vue.set(state, 'componentData', componentData) 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 }) { addComponent(state, { component, index }) {
if (index !== undefined) { if (index !== undefined) {
state.componentData.splice(index, 0, component) state.componentData.splice(index, 0, component)
...@@ -305,6 +322,9 @@ const data = { ...@@ -305,6 +322,9 @@ const data = {
bus.$emit('onRemoveLastItem') bus.$emit('onRemoveLastItem')
} }
state.dragComponentInfo = null state.dragComponentInfo = null
},
setMobileLayoutStatus(state, status) {
state.mobileLayoutStatus = status
} }
}, },
modules: { modules: {
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ 50bf35bc
...@@ -54,6 +54,12 @@ ...@@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont">&#xe625;</span> <span class="icon iconfont">&#xe625;</span>
<div class="name">video</div> <div class="name">video</div>
...@@ -462,9 +468,9 @@ ...@@ -462,9 +468,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1636358286475') format('woff2'), src: url('iconfont.woff2?t=1636516993563') format('woff2'),
url('iconfont.woff?t=1636358286475') format('woff'), url('iconfont.woff?t=1636516993563') format('woff'),
url('iconfont.ttf?t=1636358286475') format('truetype'); url('iconfont.ttf?t=1636516993563') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -490,6 +496,15 @@ ...@@ -490,6 +496,15 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<span class="icon iconfont icon-video"></span> <span class="icon iconfont icon-video"></span>
<div class="name"> <div class="name">
...@@ -1102,6 +1117,14 @@ ...@@ -1102,6 +1117,14 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <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"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-video"></use> <use xlink:href="#icon-video"></use>
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ 50bf35bc
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2459092 */ font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1636358286475') format('woff2'), src: url('iconfont.woff2?t=1636516993563') format('woff2'),
url('iconfont.woff?t=1636358286475') format('woff'), url('iconfont.woff?t=1636516993563') format('woff'),
url('iconfont.ttf?t=1636358286475') format('truetype'); url('iconfont.ttf?t=1636516993563') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-yidongduan:before {
content: "\e653";
}
.icon-video:before { .icon-video:before {
content: "\e625"; content: "\e625";
} }
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ 50bf35bc
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ 50bf35bc
...@@ -5,6 +5,13 @@ ...@@ -5,6 +5,13 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "11799014",
"name": "移动端",
"font_class": "yidongduan",
"unicode": "e653",
"unicode_decimal": 58963
},
{ {
"icon_id": "5994030", "icon_id": "5994030",
"name": "video", "name": "video",
......
frontend/src/views/panel/edit/ComponentWait.vue 0 → 100644
浏览文件 @ 50bf35bc
<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>
frontend/src/views/panel/edit/ComponentWaitItem.vue 0 → 100644
浏览文件 @ 50bf35bc
<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>
frontend/src/views/panel/list/PanelList.vue
浏览文件 @ 50bf35bc
...@@ -22,19 +22,6 @@ ...@@ -22,19 +22,6 @@
<el-dropdown-item @click.native="searchTypeClick('folder')">目录</el-dropdown-item> <el-dropdown-item @click.native="searchTypeClick('folder')">目录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </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-col>
</el-row> </el-row>
<el-row> <el-row>
...@@ -246,7 +233,6 @@ import { ...@@ -246,7 +233,6 @@ import {
DEFAULT_COMMON_CANVAS_STYLE_STRING DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel' } from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector' import TreeSelector from '@/components/TreeSelector'
import { post } from '@/api/chart/chart'
export default { export default {
name: 'PanelList', name: 'PanelList',
...@@ -637,7 +623,6 @@ export default { ...@@ -637,7 +623,6 @@ export default {
item.sizey = (item.sizey || 5) item.sizey = (item.sizey || 5)
}) })
this.$store.commit('setComponentData', this.resetID(componentDatas)) 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) const temp = JSON.parse(response.data.panelStyle)
temp.refreshTime = (temp.refreshTime || 5) temp.refreshTime = (temp.refreshTime || 5)
temp.refreshViewLoading = (temp.refreshViewLoading || false) temp.refreshViewLoading = (temp.refreshViewLoading || false)
......
frontend/src/views/panel/list/PanelViewShow.vue
浏览文件 @ 50bf35bc
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span> <span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
</el-col> </el-col>
<el-col :span="12"> <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"> <el-button size="mini" type="primary" @click="editPanel">
{{ $t('commons.edit') }} {{ $t('commons.edit') }}
</el-button> </el-button>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论