Merge pull request #2404 from dataease/pr@dev@panel_edit-layout

refactor: 仪表板编辑页面操作布局优化
This commit is contained in:
王嘉豪 2022-06-09 15:53:27 +08:00 committed by GitHub
commit 4f52252c8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 172 additions and 109 deletions

View File

@ -1,5 +1,17 @@
<template>
<div>
<div class="switch-position">
<el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
<el-radio-button :label="false">
<span style="float: left;">
<i class="el-icon-monitor" />
</span>
</el-radio-button>
<el-radio-button :label="true">
<span class="icon iconfont icon-yidongduan" />
</el-radio-button>
</el-radio-group>
</div>
<div v-show="editControlButton" class="toolbar">
<span style="float: right;">
<el-button v-if="mobileLayoutStatus" size="mini" @click="editReset">
@ -13,50 +25,71 @@
</el-button>
</span>
</div>
<div v-show="!editControlButton" class="toolbar">
<el-tooltip :content="$t('panel.mobile_layout')">
<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-tooltip>
<div class="panel-info-area">
<el-tooltip :content="$t('commons.back') ">
<i class="el-icon-back icon-back" @click="closePanelEdit" />
</el-tooltip>
<span class="text">
{{ panelInfo.name }}
</span>
</div>
<el-tooltip :content="$t('panel.undo') ">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
<i class="el-icon-refresh-right insert" @click="undo" />
</el-tooltip>
<el-tooltip :content="$t('panel.redo') ">
<el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
</el-tooltip>
<el-tooltip :content="$t('panel.clean_canvas')">
<el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
<i class="el-icon-refresh-left insert" @click="redo" />
</el-tooltip>
<el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>
<el-tooltip :content="$t('panel.params_setting')">
<el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />
</el-tooltip>
<el-tooltip v-if="!canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_close')">
<el-button class="icon iconfont-tb icon-wangge-close" size="mini" circle @click="showGridChange" />
</el-tooltip>
<el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')">
<el-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
</el-tooltip>
<el-tooltip :content="$t('panel.batch_opt')">
<el-button class="icon iconfont-tb icon-piliang-copy" size="mini" circle @click="batchOption" />
<span class="icon iconfont icon-fangda insert" @click="clickPreview" />
</el-tooltip>
<el-divider direction="vertical" />
<span class="button_self">
<el-dropdown trigger="click" placement="bottom-start" size="mini">
<el-button size="mini">
<i class="el-icon-arrow-down" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%">
<span>
<span class="icon iconfont" :class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']" />
<span style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="auxiliaryMatrixChange">
<span :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.suspension') }} </span>
<i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
</el-dropdown-item>
<el-dropdown-item @click.native="auxiliaryMatrixChange">
<span :class="[canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.matrix') }} </span>
<i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item @click.native="showGridChange">
<span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
{{ $t('panel.aided_grid') }}:{{ canvasStyleData.aidedDesign.showGrid?$t('panel.aided_grid_open'):$t('panel.aided_grid_close') }}
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont-tb icon-canshu" />{{ $t('panel.params_setting') }}
</el-dropdown-item>
<el-dropdown-item @click.native="clearCanvas">
<i class="el-icon-document-delete" />{{ $t('panel.clean_canvas') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style') }}</el-button>
<el-button size="mini" @click="batchOption"> <span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{ $t('panel.batch_opt') }}</el-button>
<span style="float: right;margin-left: 10px">
<el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}
</el-button>
<el-button size="mini" @click="closePanelEdit">
{{ $t('commons.close') }}
</el-button>
</span>
</div>
@ -103,6 +136,7 @@ export default {
},
data() {
return {
mobileLayoutInitStatus: false,
isShowPreview: false,
needToChange: [
'top',
@ -119,6 +153,9 @@ export default {
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
},
saveButtonDisabled() {
return this.changeTimes === 0 || this.snapshotIndex === this.lastSaveSnapshotIndex
},
@ -147,6 +184,7 @@ export default {
eventBus.$on('save', this.save)
eventBus.$on('clearCanvas', this.clearCanvas)
this.scale = this.canvasStyleData.scale
this.mobileLayoutInitStatus = this.mobileLayoutStatus
},
methods: {
close() {
@ -277,7 +315,7 @@ export default {
this.$store.commit('clearPanelLinkageInfo')
//
const requestInfo = {
id: this.$store.state.panel.panelInfo.id,
id: this.panelInfo.id,
panelStyle: JSON.stringify(this.canvasStyleData),
panelData: JSON.stringify(this.componentData)
}
@ -311,6 +349,7 @@ export default {
this.$store.commit('setComponentData', [])
this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
this.$store.commit('recordSnapshot', 'clearCanvas')
this.$store.commit('setInEditorStatus', false)
},
handlePreviewChange() {
@ -353,18 +392,18 @@ export default {
}
}
const request = {
panelId: this.$store.state.panel.panelInfo.id,
panelId: this.panelInfo.id,
sourceViewId: this.curLinkageView.propValue.viewId,
linkageInfo: this.targetLinkageInfo
}
saveLinkage(request).then(rsp => {
//
getPanelAllLinkageInfo(this.$store.state.panel.panelInfo.id).then(rsp => {
getPanelAllLinkageInfo(this.panelInfo.id).then(rsp => {
this.$store.commit('setNowPanelTrackInfo', rsp.data)
})
this.cancelLinkageSettingStatus()
//
queryPanelJumpInfo(this.$store.state.panel.panelInfo.id).then(rsp => {
queryPanelJumpInfo(this.panelInfo.id).then(rsp => {
this.$store.commit('setNowPanelJumpInfo', rsp.data)
})
})
@ -372,6 +411,7 @@ export default {
cancelMobileLayoutStatue(sourceComponentData) {
this.$store.commit('setComponentData', sourceComponentData)
this.$store.commit('setMobileLayoutStatus', false)
this.mobileLayoutInitStatus = false
},
cancelLinkage() {
this.cancelLinkageSettingStatus()
@ -392,8 +432,12 @@ export default {
this.$store.commit('setBatchOptStatus', !this.batchOptStatus)
},
//
openMobileLayout() {
this.$store.commit('openMobileLayout')
openMobileLayout(switchVal) {
if (switchVal) {
this.$store.commit('openMobileLayout')
} else {
this.mobileLayoutSave()
}
},
editSave() {
if (this.mobileLayoutStatus) {
@ -439,7 +483,7 @@ export default {
.toolbar {
float: right;
height: 35px;
line-height: 35px;
line-height: 32px;
min-width: 400px;
.canvas-config {
display: inline-block;
@ -464,8 +508,8 @@ export default {
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #FFF;
border: 1px solid #DCDFE6;
/*background: #FFF;*/
/*border: 1px solid #DCDFE6;*/
color: var(--TextPrimary, #606266);
-webkit-appearance: none;
text-align: center;
@ -474,14 +518,15 @@ export default {
margin: 0;
transition: .1s;
font-weight: 500;
padding: 9px 15px;
font-size: 12px;
padding: 5px 5px;
font-size: 16px!important;
border-radius: 3px;
margin-left: 10px;
&:active {
color: #3a8ee6;
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
@ -520,4 +565,41 @@ export default {
-moz-osx-font-smoothing: grayscale;
}
.switch-position{
position: absolute;
top: 3px;
right: 50%;
width: 100px;
}
.button_self{
margin-right: 5px;
}
.button_self ::v-deep .el-button--mini{
padding: 7px 7px !important;
}
.font-active{
font-color: #3a8ee6!important;
}
.icon-active{
color: #3a8ee6;
}
.icon-unactivated{
display: none;
}
.panel-info-area{
position: absolute;
left: 10px;
.text{
font-size: 16px;
color: var(--TextPrimary, #606266);
};
.icon-back{
font-size: 18px;
font-weight: bold;
color: var(--TextPrimary, #606266);
}
}
</style>

View File

@ -1,7 +1,7 @@
import store from '@/store'
import eventBus from '@/components/canvas/utils/eventBus'
const ctrlKey = 17
const commandKey = 91 // mac command
const vKey = 86 // 粘贴
const cKey = 67 // 复制
const xKey = 88 // 剪切
@ -27,10 +27,7 @@ export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
const basemap = {
[vKey]: paste,
[yKey]: redo,
[zKey]: undo,
[sKey]: save,
[pKey]: preview,
[eKey]: clearCanvas
[zKey]: undo
}
// 组件锁定状态下可以执行的操作
@ -51,33 +48,28 @@ const unlockMap = {
[lKey]: lock
}
let isCtrlDown = false
// 全局监听按键操作并执行相应命令
// export function listenGlobalKeyDown() {
// window.onkeydown = (e) => {
// const { curComponent } = store.state
// if (e.keyCode === ctrlKey) {
// isCtrlDown = true
// } else if (e.keyCode === deleteKey && curComponent) {
// store.commit('deleteComponent')
// store.commit('recordSnapshot')
// } else if (isCtrlDown) {
// if (!curComponent || !curComponent.isLock) {
// e.preventDefault()
// unlockMap[e.keyCode] && unlockMap[e.keyCode]()
// } else if (curComponent && curComponent.isLock) {
// e.preventDefault()
// lockMap[e.keyCode] && lockMap[e.keyCode]()
// }
// }
// }
//
// window.onkeyup = (e) => {
// if (e.keyCode === ctrlKey) {
// isCtrlDown = false
// }
// }
// }
let isCtrlOrCommandDown = false
// Monitor key operations globally and execute corresponding commands
export function listenGlobalKeyDown() {
window.onkeydown = (e) => {
if (!store.state.isInEditor) return
const { keyCode } = e
if (keyCode === ctrlKey || keyCode === commandKey) {
isCtrlOrCommandDown = true
} else if (isCtrlOrCommandDown) {
if (keyCode === zKey || keyCode === yKey) {
e.preventDefault()
unlockMap[keyCode]()
}
}
}
window.onkeyup = (e) => {
if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
isCtrlOrCommandDown = false
}
}
}
function copy() {
store.commit('copy')
@ -115,14 +107,6 @@ function decompose() {
}
}
function save() {
eventBus.$emit('save')
}
function preview() {
eventBus.$emit('preview')
}
function deleteComponent() {
if (store.state.curComponent) {
store.commit('deleteComponent')
@ -130,10 +114,6 @@ function deleteComponent() {
}
}
function clearCanvas() {
eventBus.$emit('clearCanvas')
}
function lock() {
store.commit('lock')
}

View File

@ -1452,6 +1452,7 @@ export default {
sure_bt: 'Confirm'
},
panel: {
panel_style: 'Panel Style',
multiplexing: 'Multiplexing',
panel_off: 'Off the shelf',
batch_opt: 'Batch Operation',
@ -1646,7 +1647,7 @@ export default {
no_drill_field: 'Miss relation field',
matrix: 'matrix',
suspension: 'suspension',
new_element_distribution: 'New element Distribution',
new_element_distribution: 'Element Distribution',
aided_grid: 'Aided Grid',
aided_grid_open: 'Open',
aided_grid_close: 'Close',

View File

@ -1453,6 +1453,7 @@ export default {
sure_bt: '確定'
},
panel: {
panel_style: '仪表板样式',
multiplexing: '復用',
panel_off: '儀表板已下架',
batch_opt: '批量操作',
@ -1647,7 +1648,7 @@ export default {
no_drill_field: '缺少關聯字段',
matrix: '矩陣',
suspension: '懸浮',
new_element_distribution: '當前元素移入分佈方式',
new_element_distribution: '元素移入分佈方式',
aided_grid: '輔助設計網格',
aided_grid_open: '打開',
aided_grid_close: '關閉',

View File

@ -646,7 +646,7 @@ export default {
login_type: '默认登录方式',
empty_front: '为空则默认取10秒',
empty_msg: '为空则默认取30天',
front_error: '请填写0-300正整数', //修改了提示信息
front_error: '请填写0-300正整数', // 修改了提示信息
msg_error: '请填写1-365正整数',
SMTP_port: 'SMTP端口',
SMTP_account: 'SMTP账户',
@ -1460,6 +1460,7 @@ export default {
sure_bt: '确定'
},
panel: {
panel_style: '仪表板样式',
multiplexing: '复用',
panel_off: '仪表板已下架',
batch_opt: '批量操作',
@ -1656,7 +1657,7 @@ export default {
no_drill_field: '缺少关联字段',
matrix: '矩阵',
suspension: '悬浮',
new_element_distribution: '当前元素移入分布方式',
new_element_distribution: '元素移入分布方式',
aided_grid: '辅助设计网格',
aided_grid_open: '打开',
aided_grid_close: '关闭',

View File

@ -129,7 +129,8 @@ const data = {
customStyle: {},
customAttr: {}
},
allViewRender: []
allViewRender: [],
isInEditor: false // 是否在编辑器中,用于判断复制、粘贴组件时是否生效,如果在编辑器外,则无视这些操作
},
mutations: {
...animation.mutations,
@ -658,6 +659,8 @@ const data = {
this.commit('clearLinkageSettingInfo', false)
this.commit('resetViewEditInfo')
this.commit('initCurMultiplexingComponents')
// 清空当前缓存,快照
this.commit('refreshSnapshot')
state.batchOptStatus = false
// Currently selected components
state.curBatchOptComponents = []
@ -670,6 +673,7 @@ const data = {
customStyle: {},
customAttr: {}
}
state.isInEditor = true
},
initViewRender(state, pluginViews) {
pluginViews.forEach(plugin => {
@ -679,6 +683,9 @@ const data = {
},
initCurMultiplexingComponents(state) {
state.curMultiplexingComponents = {}
},
setInEditorStatus(state, status) {
state.isInEditor = status
}
},
modules: {

View File

@ -1,16 +1,8 @@
<template>
<el-row>
<el-header class="de-header">
<el-col
:span="8"
style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px"
>
<span style="line-height: 35px;">
{{ $t('commons.name') }} {{ panelInfo.name || '测试仪表板' }}
</span>
</el-col>
<!--横向工具栏-->
<el-col :span="16">
<el-col :span="24">
<Toolbar
ref="toolbar"
:style-button-active="show&&showIndex===2"
@ -376,7 +368,7 @@ import ChartEdit from '@/views/chart/view/ChartEdit'
import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
import Multiplexing from '@/views/panel/ViewSelect/multiplexing'
import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
export default {
name: 'PanelEdit',
components: {
@ -388,7 +380,6 @@ export default {
DeContainer,
DeAsideContainer,
FilterGroup,
ViewSelect,
Editor,
Toolbar,
FilterDialog,
@ -615,6 +606,8 @@ export default {
}
},
created() {
// Global listening for key events
listenGlobalKeyDown()
this.init(this.$store.state.panel.panelInfo.id)
},
mounted() {
@ -1145,11 +1138,11 @@ export default {
.de-header {
height: 35px !important;
border-bottom: 1px solid #E6E6E6;
background-color: var(--SiderBG, white);
}
.blackTheme .de-header {
background-color: var(--SiderBG) !important;
background-color: var(--SiderBG, white) !important;
color: var(--TextActive);
}

View File

@ -686,8 +686,6 @@ export default {
edit(data, node) {
this.lastActiveNodeData = data
this.lastActiveNode = node
// ,
this.$store.commit('refreshSnapshot')
this.$store.commit('setComponentData', [])
this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
this.$store.dispatch('panel/setPanelInfo', {