Skip to content

D
dataease
Unverified 提交 16e807bc authored 作者: 王嘉豪's avatar 王嘉豪 提交者： GitHub
浏览文件
操作

feat(仪表板): 仪表板支持设置移动端布局

* feat:仪表板移动端布局 * feat(仪表板): 仪表板支持设置移动端布局
上级 9f00acce
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 519 行增加 和 149 行删除
frontend/package.json
浏览文件 @ 16e807bc
......@@ -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",
......
frontend/src/components/DeDrag/index.vue
浏览文件 @ 16e807bc
......@@ -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'
])
},
......
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
浏览文件 @ 16e807bc
......@@ -37,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: {
......@@ -71,6 +72,7 @@ export default {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([
'mobileLayoutStatus',
'canvasStyleData',
'curComponent',
'componentGap'
......@@ -96,7 +98,6 @@ export default {
}
if (prop === 'top') {
const top = this.format(style['top'], this.scaleHeight)
// console.log('top:' + top)
return top
}
},
......@@ -107,19 +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']
}
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
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
},
getComponentStyleDefault(style) {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
// 移动端编辑状态 且 未被移动端选中的组件 放满容器
if (this.mobileLayoutStatus && !this.config.mobileSelected) {
return {
width: '100%',
height: '100%'
}
} else {
return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
}
},
handleClick() {
......
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ 16e807bc
......@@ -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')
}
......
frontend/src/components/canvas/components/Editor/MobileCheckBar.vue 0 → 100644
浏览文件 @ 16e807bc
<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/Toolbar.vue
浏览文件 @ 16e807bc
<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{
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 16e807bc
......@@ -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) {
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 16e807bc
// 基础移动端定位样式
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,
......@@ -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,
......@@ -307,6 +329,7 @@ const list = [
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,
......
frontend/src/components/canvas/utils/utils.js
浏览文件 @ 16e807bc
......@@ -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
}
frontend/src/main.js
浏览文件 @ 16e807bc
......@@ -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
......
frontend/src/store/index.js
浏览文件 @ 16e807bc
......@@ -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: {
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ 16e807bc
......@@ -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>
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ 16e807bc
@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";
}
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ 16e807bc
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ 16e807bc
......@@ -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",
......
frontend/src/views/panel/edit/ComponentWait.vue 0 → 100644
浏览文件 @ 16e807bc
<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
浏览文件 @ 16e807bc
<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
浏览文件 @ 16e807bc
......@@ -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)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论