fix(仪表板): 优化一些热键冲突

This commit is contained in:
wangjiahao 2022-11-24 17:41:55 +08:00
parent 4f9f0fb12e
commit b7c5b5bb24
9 changed files with 134 additions and 88 deletions

View File

@ -274,7 +274,7 @@ export default {
} else {
return {
...
getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
getStyle(style, ['top', 'left', 'width', 'height', 'rotate']),
position: 'relative'
}
}

View File

@ -120,6 +120,7 @@ import { userLoginInfo } from '@/api/systemInfo/userLogin'
import html2canvas from 'html2canvasde'
import { queryAll } from '@/api/panel/pdfTemplate'
import PDFPreExport from '@/views/panel/export/PDFPreExport'
import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
const erd = elementResizeDetectorMaker()
export default {
@ -351,6 +352,9 @@ export default {
}
},
created() {
if (this.canvasId === 'canvas-main') {
listenGlobalKeyDownPreview()
}
//
this.$cancelRequest('/chart/view/getData/**')
this.$cancelRequest('/api/link/viewDetail/**')

View File

@ -25,6 +25,24 @@ export default {
}
},
mutations: {
// 复制到粘贴板
copyToClipboard(state) {
if (state.curComponent) {
Vue.prototype.$copyText('datease-component-' + state.curComponent.id)
}
},
passFromClipboard(state, componentId) {
state.componentData.forEach(item => {
if (item.id === componentId) {
state.copyData = {
data: deepCopy(item),
index: state.componentData.length
}
}
})
state.isCut = false
this.commit('paste')
},
copyMultiplexingComponents(state) {
let pYMax = 0
const _this = this
@ -89,10 +107,8 @@ export default {
paste(state, needAdaptor) {
if (!state.copyData) {
toast('请选择组件')
return
}
const data = state.copyData.data
// 仪表板复制的组件默认不在移动端部署中mobileSelected = false
data.mobileSelected = false

View File

@ -56,7 +56,27 @@ export function listenGlobalKeyDown() {
if (keyCode === ctrlKey || keyCode === commandKey) {
isCtrlOrCommandDown = true
} else if (isCtrlOrCommandDown) {
if (keyCode === zKey || keyCode === yKey || keyCode === vKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
if (keyCode === zKey || keyCode === yKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
e.preventDefault()
unlockMap[keyCode]()
}
}
}
window.onkeyup = (e) => {
if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
isCtrlOrCommandDown = false
}
}
}
export function listenGlobalKeyDownPreview() {
window.onkeydown = (e) => {
const { keyCode } = e
if (keyCode === ctrlKey || keyCode === commandKey) {
isCtrlOrCommandDown = true
} else if (isCtrlOrCommandDown) {
if (keyCode === enlargeKey) {
e.preventDefault()
unlockMap[keyCode]()
}
@ -71,12 +91,11 @@ export function listenGlobalKeyDown() {
}
function copy() {
store.commit('copy')
store.commit('copyToClipboard')
}
function paste() {
store.commit('paste')
store.commit('recordSnapshot')
}
function cut() {

View File

@ -192,7 +192,7 @@
@command="chartFieldEdit"
>
<span class="el-dropdown-link">
<i class="el-icon-s-tools"/>
<i class="el-icon-s-tools" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@ -267,7 +267,7 @@
@command="chartFieldEdit"
>
<span class="el-dropdown-link">
<i class="el-icon-s-tools"/>
<i class="el-icon-s-tools" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@ -362,7 +362,7 @@
style="padding: 6px;"
>
{{ $t('chart.change_chart_type') }}
<i class="el-icon-caret-bottom"/>
<i class="el-icon-caret-bottom" />
</el-button>
</el-popover>
</span>
@ -490,8 +490,8 @@
>
<span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column')
}}</span>
$t('chart.drag_block_table_data_column')
}}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
>{{ $t('chart.drag_block_type_axis') }}</span>
@ -499,18 +499,18 @@
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{
$t('chart.drag_block_funnel_split')
}}</span>
$t('chart.drag_block_funnel_split')
}}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{
$t('chart.drag_block_radar_label')
}}</span>
$t('chart.drag_block_radar_label')
}}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
<span v-else-if="view.type && view.type.includes('treemap')">{{
$t('chart.drag_block_treemap_label')
}}</span>
$t('chart.drag_block_treemap_label')
}}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{
$t('chart.drag_block_word_cloud_label')
}}</span>
$t('chart.drag_block_word_cloud_label')
}}</span>
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
<span v-show="view.type !== 'richTextView'"> / </span>
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@ -633,8 +633,8 @@
>
<span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column')
}}</span>
$t('chart.drag_block_table_data_column')
}}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
>{{ $t('chart.drag_block_value_axis') }}</span>
@ -642,30 +642,30 @@
v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{
$t('chart.drag_block_funnel_width')
}}</span>
$t('chart.drag_block_funnel_width')
}}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{
$t('chart.drag_block_radar_length')
}}</span>
$t('chart.drag_block_radar_length')
}}</span>
<span v-else-if="view.type && view.type.includes('gauge')">{{
$t('chart.drag_block_gauge_angel')
}}</span>
$t('chart.drag_block_gauge_angel')
}}</span>
<span
v-else-if="view.type && view.type.includes('text')"
>{{ $t('chart.drag_block_label_value') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
<span v-else-if="view.type && view.type.includes('tree')">{{
$t('chart.drag_block_treemap_size')
}}</span>
$t('chart.drag_block_treemap_size')
}}</span>
<span v-else-if="view.type && view.type === 'chart-mix'">{{
$t('chart.drag_block_value_axis_main')
}}</span>
$t('chart.drag_block_value_axis_main')
}}</span>
<span
v-else-if="view.type && view.type === 'liquid'"
>{{ $t('chart.drag_block_progress') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{
$t('chart.drag_block_word_cloud_size')
}}</span>
$t('chart.drag_block_word_cloud_size')
}}</span>
<span v-show="view.type !== 'richTextView'"> / </span>
<span>{{ $t('chart.quota') }}</span>
<i
@ -1116,7 +1116,7 @@
class="padding-tab"
style="width: 350px;"
>
<position-adjust/>
<position-adjust />
</el-tab-pane>
</el-tabs>
@ -1268,7 +1268,7 @@
width="800px"
class="dialog-css"
>
<quota-filter-editor :item="quotaItem"/>
<quota-filter-editor :item="quotaItem" />
<div
slot="footer"
class="dialog-footer"
@ -1295,7 +1295,7 @@
width="800px"
class="dialog-css"
>
<dimension-filter-editor :item="dimensionItem"/>
<dimension-filter-editor :item="dimensionItem" />
<div
slot="footer"
class="dialog-footer"

View File

@ -30,8 +30,8 @@
type="number"
:min="0"
:max="maxLeft"
@change="leftOnChange"
class="hide-icon-number"
@change="leftOnChange"
>
<template slot="append">px</template>
</el-input>

View File

@ -130,8 +130,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -180,8 +180,8 @@
/>
</span>
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
data.label
}}</span>
</template>
</el-cascader>
<span class="select-svg-icon">
@ -284,8 +284,8 @@
v-if="scope.row.deExtractType === 3"
class="field-class"
>{{
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon
@ -308,8 +308,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -356,7 +356,7 @@
"
command="copy"
>
<i class="el-icon-document-copy" />
<i class="el-icon-document-copy"/>
{{ $t('dataset.copy') }}
</el-dropdown-item>
<el-dropdown-item
@ -365,7 +365,7 @@
"
command="delete"
>
<i class="el-icon-delete" />
<i class="el-icon-delete"/>
{{ $t('chart.delete') }}
</el-dropdown-item>
</slot>
@ -470,8 +470,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -520,8 +520,8 @@
/>
</span>
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
data.label
}}</span>
</template>
</el-cascader>
<span class="select-svg-icon">
@ -616,8 +616,8 @@
v-if="scope.row.deExtractType === 3"
class="field-class"
>{{
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon
@ -640,8 +640,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -689,7 +689,7 @@
"
command="copy"
>
<i class="el-icon-document-copy" />
<i class="el-icon-document-copy"/>
{{ $t('dataset.copy') }}
</el-dropdown-item>
<el-dropdown-item
@ -698,7 +698,7 @@
"
command="delete"
>
<i class="el-icon-delete" />
<i class="el-icon-delete"/>
{{ $t('chart.delete') }}
</el-dropdown-item>
</slot>
@ -742,7 +742,7 @@
</template>
<script>
import { post, fieldListDQ, batchEdit, dateformats } from '@/api/dataset/dataset'
import { batchEdit, dateformats, fieldListDQ, post } from '@/api/dataset/dataset'
import CalcFieldEdit from './CalcFieldEdit'
import { getFieldName } from '@/views/dataset/data/utils'
import msgCfm from '@/components/msgCfm/index'
@ -839,7 +839,7 @@ export default {
})
},
getFields(item) {
if(item.deExtractType == 0){
if (item.deExtractType === 0) {
const children = this.dateformats
return [
{ label: this.$t('dataset.text'), value: 0 },
@ -852,7 +852,7 @@ export default {
},
{ label: this.$t('dataset.location'), value: 5 }
]
}else {
} else {
return [
{ label: this.$t('dataset.text'), value: 0 },
{ label: this.$t('dataset.time'), value: 1 },
@ -870,7 +870,7 @@ export default {
item.deType = item.deTypeCascader[0]
if (item.deTypeCascader.length === 2) { //
item.dateFormatType = item.deTypeCascader[1]
if(item.dateFormatType !== 'custom'){
if (item.dateFormatType !== 'custom') {
item.dateFormat = item.dateFormatType
}
}

View File

@ -165,8 +165,8 @@
v-show=" show &&showIndex===1"
:canvas-id="canvasId"
/>
<subject-setting v-show=" show &&showIndex===2"/>
<assist-component v-show=" show &&showIndex===3"/>
<subject-setting v-show=" show &&showIndex===2" />
<assist-component v-show=" show &&showIndex===3" />
</div>
</el-drawer>
<!--PC端画布区域-->
@ -181,7 +181,7 @@
:canvas-pid="'0'"
@canvasScroll="canvasScroll"
>
<canvas-opt-bar slot="optBar"/>
<canvas-opt-bar slot="optBar" />
</de-canvas>
<!--移动端画布区域 保持宽高比2.5-->
<el-row
@ -197,7 +197,7 @@
:style="customCanvasMobileStyle"
class="this_mobile_canvas"
>
<el-row class="this_mobile_canvas_top"/>
<el-row class="this_mobile_canvas_top" />
<el-row class="this_mobile_canvas_inner_top">
{{ panelInfo.name }}
</el-row>
@ -215,7 +215,7 @@
:canvas-pid="'0'"
:mobile-layout-status="true"
>
<canvas-opt-bar slot="optBar"/>
<canvas-opt-bar slot="optBar" />
</de-canvas>
</el-row>
<el-row class="this_mobile_canvas_inner_bottom">
@ -245,14 +245,14 @@
/>
</el-col>
</el-row>
<el-row class="this_mobile_canvas_bottom"/>
<el-row class="this_mobile_canvas_bottom" />
</div>
</el-col>
<el-col
:span="16"
class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
>
<component-wait/>
<component-wait />
</el-col>
</el-row>
</de-main-container>
@ -270,7 +270,7 @@
/>
</div>
<div v-if="showBatchViewToolsAside">
<chart-style-batch-set/>
<chart-style-batch-set />
</div>
<div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
<el-row style="height: 40px">
@ -283,11 +283,10 @@
@click="changeRightDrawOpen(false)"
/>
</el-tooltip>
<span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px"
>{{ $t('panel.position_adjust') }}</span>
<span style="font-weight: bold;font-size: 14px;margin-left: 40px;line-height:40px">{{ $t('panel.position_adjust') }}</span>
</el-row>
<el-row>
<position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix"/>
<position-adjust v-if="curComponent&&!curComponent.auxiliaryMatrix" />
</el-row>
</div>
</div>
@ -446,8 +445,7 @@
/>
</el-col>
<el-col :span="21">
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
>{{ $t('panel.panel_cache_use_tips') }}</span>
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
</el-col>
</el-row>
<div
@ -646,7 +644,7 @@ export default {
},
//
showViewToolsAside() {
return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view')
return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
},
showBatchViewToolsAside() {
return this.batchOptStatus
@ -792,8 +790,8 @@ export default {
}
},
created() {
// Global listening for key events
listenGlobalKeyDown()
document.addEventListener('paste', this.passFromClipboard)
},
mounted() {
this.initWatermark()
@ -810,6 +808,7 @@ export default {
this.init(this.$store.state.panel.panelInfo.id)
},
beforeDestroy() {
document.removeEventListener('paste', this.passFromClipboard)
bus.$off('component-on-drag', this.componentOnDrag)
// bus.$off('component-dialog-edit', this.editDialog)
// bus.$off('button-dialog-edit', this.editButtonDialog)
@ -823,6 +822,14 @@ export default {
elx && elx.remove()
},
methods: {
passFromClipboard(event) {
//
const text = (event.clipboardData || window.clipboardData).getData('text')
if (text && text.includes('datease-component-')) {
event.preventDefault()
this.$store.commit('passFromClipboard', text.replace('datease-component-', ''))
}
},
initWatermark() {
if (this.panelInfo.watermarkInfo) {
userLoginInfo().then(res => {
@ -963,11 +970,11 @@ export default {
showPanel(type) {
if (this.showIndex === -1 || this.showIndex === type) {
this.$nextTick(() => {
if (this.show) {
this.showIndex === -1
}
this.show = !this.show
if (this.show) {
this.showIndex === -1
}
this.show = !this.show
}
)
}
this.showIndex = type

View File

@ -174,7 +174,7 @@
/>
</span>
<span v-if="data.nodeType === 'folder'">
<svg-icon icon-class="scene"/>
<svg-icon icon-class="scene" />
</span>
<span
:class="data.status"
@ -211,7 +211,7 @@
<el-dropdown-item
:command="beforeClickEdit('folder', 'new', data, node)"
>
<svg-icon icon-class="scene"/>
<svg-icon icon-class="scene" />
<span style="margin-left: 5px">{{ $t('panel.groupAdd') }}</span>
</el-dropdown-item>
<el-dropdown-item
@ -334,7 +334,7 @@
:label="$t('commons.name')"
prop="name"
>
<el-input v-model="groupForm.name"/>
<el-input v-model="groupForm.name" />
</el-form-item>
</el-form>
<div
@ -345,8 +345,8 @@
size="mini"
@click="close()"
>{{
$t('panel.cancel')
}}
$t('panel.cancel')
}}
</el-button>
<el-button
type="primary"
@ -422,8 +422,8 @@
size="mini"
@click="closeMoveGroup()"
>{{
$t('dataset.cancel')
}}
$t('dataset.cancel')
}}
</el-button>
<el-button
:disabled="groupMoveConfirmDisabled"