Merge branch 'v1.1' of github.com:dataease/dataease into v1.1
This commit is contained in:
taojinlong
commit
703e2ded1e
172
frontend/src/components/DeDrag/DragShadow.vue
Normal file
172
frontend/src/components/DeDrag/DragShadow.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<Toolbar />
|
||||
|
||||
<main>
|
||||
<!-- 左侧组件列表 -->
|
||||
<!-- <section class="left">-->
|
||||
<!-- <ComponentList />-->
|
||||
<!-- </section>-->
|
||||
<!-- 中间画布 -->
|
||||
<section class="center">
|
||||
<div
|
||||
class="content"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
>
|
||||
<Editor />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Editor from '@/components/Editor/index'
|
||||
import ComponentList from '@/components/ComponentList' // 左侧列表组件
|
||||
import AttrList from '@/components/canvas/components/AttrList' // 右侧属性列表
|
||||
import AnimationList from '@/components/canvas/components/AnimationList' // 右侧动画列表
|
||||
import EventList from '@/components/canvas/components/EventList' // 右侧事件列表
|
||||
import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
|
||||
import Toolbar from '@/components/Toolbar'
|
||||
import { deepCopy } from '@/utils/utils'
|
||||
import { mapState } from 'vuex'
|
||||
import generateID from '@/utils/generateID'
|
||||
import { listenGlobalKeyDown } from '@/utils/shortcutKey'
|
||||
|
||||
export default {
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
components: { Editor, ComponentList, AttrList, AnimationList, EventList, Toolbar },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'attr',
|
||||
reSelectAnimateIndex: undefined
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'componentData',
|
||||
'curComponent',
|
||||
'isClickComponent',
|
||||
'canvasStyleData'
|
||||
]),
|
||||
created() {
|
||||
this.restore()
|
||||
// 全局监听按键事件
|
||||
listenGlobalKeyDown()
|
||||
},
|
||||
methods: {
|
||||
restore() {
|
||||
// 用保存的数据恢复画布
|
||||
if (localStorage.getItem('canvasData')) {
|
||||
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
|
||||
}
|
||||
|
||||
if (localStorage.getItem('canvasStyle')) {
|
||||
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
|
||||
}
|
||||
},
|
||||
|
||||
resetID(data) {
|
||||
if (data) {
|
||||
data.forEach(item => {
|
||||
// eslint-disable-next-line no-undef
|
||||
item.type !== 'custom' && (item.id = uuid.v1())
|
||||
})
|
||||
}
|
||||
|
||||
return data
|
||||
},
|
||||
|
||||
handleDrop(e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
let component
|
||||
const id = e.dataTransfer.getData('componentId')
|
||||
componentList.forEach(componentTemp => {
|
||||
if (id === componentTemp.id) {
|
||||
component = deepCopy(componentTemp)
|
||||
}
|
||||
})
|
||||
// const component = deepCopy(componentList[e.dataTransfer.getData('index')])
|
||||
component.style.top = e.offsetY
|
||||
component.style.left = e.offsetX
|
||||
component.id = generateID()
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot')
|
||||
},
|
||||
|
||||
handleDragOver(e) {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
},
|
||||
|
||||
handleMouseDown() {
|
||||
this.$store.commit('setClickComponentStatus', false)
|
||||
},
|
||||
|
||||
deselectCurComponent(e) {
|
||||
if (!this.isClickComponent) {
|
||||
this.$store.commit('setCurComponent', { component: null, index: null })
|
||||
}
|
||||
|
||||
// 0 左击 1 滚轮 2 右击
|
||||
if (e.button !== 2) {
|
||||
this.$store.commit('hideContextMenu')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home {
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
|
||||
main {
|
||||
height: calc(100% - 64px);
|
||||
position: relative;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 262px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: 200px;
|
||||
margin-right: 262px;
|
||||
background: #f5f5f5;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -275,6 +275,7 @@ export default {
|
||||
// 第一次变化 不需要 重置边界 待改进
|
||||
if (this.changeIndex++ > 0) {
|
||||
this.resizeParentBounds()
|
||||
this.$store.state.styleChangeTimes++
|
||||
}
|
||||
// this.changeScale()
|
||||
},
|
||||
|
||||
@ -127,7 +127,11 @@ export default {
|
||||
tokenError: 'Token error, please login again',
|
||||
username_error: 'Please enter the correct ID',
|
||||
password_error: 'The password can not be less than 8 digits',
|
||||
|
||||
login_again: 'Login again',
|
||||
|
||||
re_login: 'Login again'
|
||||
|
||||
},
|
||||
commons: {
|
||||
no_target_permission: 'No permission',
|
||||
|
||||
@ -109,25 +109,29 @@ export default {
|
||||
navbar: {
|
||||
dashboard: '首頁',
|
||||
github: '項目地址',
|
||||
logOut: '退出登陸',
|
||||
logOut: '退出登錄',
|
||||
profile: '個人中心',
|
||||
theme: '換膚',
|
||||
size: '佈局大小'
|
||||
},
|
||||
login: {
|
||||
title: '系統登陸',
|
||||
title: '系統登錄',
|
||||
welcome: '歡迎使用',
|
||||
logIn: '登陸',
|
||||
logIn: '登錄',
|
||||
username: '帳號',
|
||||
password: '密碼',
|
||||
any: '任意字符',
|
||||
thirdparty: '第三方登陸',
|
||||
thirdparty: '第三方登錄',
|
||||
thirdpartyTips: '本地不能模擬，請結合自己業務進行模擬！！！',
|
||||
expires: '登陸信息過期，請重新登陸',
|
||||
tokenError: '信息錯誤，請重新登陸',
|
||||
expires: '登錄信息過期，請重新登錄',
|
||||
tokenError: '信息錯誤，請重新登錄',
|
||||
username_error: '請輸入正確的 ID',
|
||||
password_error: '密碼不小於 8 位',
|
||||
|
||||
login_again: '重新登錄',
|
||||
|
||||
re_login: '重新登陸'
|
||||
|
||||
},
|
||||
commons: {
|
||||
no_target_permission: '沒有權限',
|
||||
@ -184,7 +188,7 @@ export default {
|
||||
prompt: '提示',
|
||||
operating: '操作',
|
||||
input_limit: '長度在 {0} 到 {1} 個字符',
|
||||
login: '登陸',
|
||||
login: '登錄',
|
||||
welcome: '一站式開源數據分析平臺',
|
||||
username: '姓名',
|
||||
password: '密碼',
|
||||
@ -256,7 +260,7 @@ export default {
|
||||
remove: '移除',
|
||||
remove_cancel: '移除取消',
|
||||
remove_success: '移除成功',
|
||||
tips: '認證信息已過期，請重新登陸',
|
||||
tips: '認證信息已過期，請重新登錄',
|
||||
not_performed_yet: '尚未執行',
|
||||
incorrect_input: '輸入內容不正確',
|
||||
delete_confirm: '請輸入以下內容，確認刪除：',
|
||||
@ -1166,9 +1170,9 @@ export default {
|
||||
},
|
||||
display: {
|
||||
logo: '頭部系統 Logo',
|
||||
loginLogo: '登陸頁面頭部 Logo',
|
||||
loginImage: '登陸頁面右側圖片',
|
||||
loginTitle: '登陸頁面標題',
|
||||
loginLogo: '登錄頁面頭部 Logo',
|
||||
loginImage: '登錄頁面右側圖片',
|
||||
loginTitle: '登錄頁面標題',
|
||||
title: '系統名稱',
|
||||
advice_size: '建議圖片大小'
|
||||
},
|
||||
|
||||
@ -127,7 +127,11 @@ export default {
|
||||
tokenError: '登陆信息错误，请重新登录',
|
||||
username_error: '请输入正确的 ID',
|
||||
password_error: '密码不小于 8 位',
|
||||
|
||||
login_again: '重新登录',
|
||||
|
||||
re_login: '重新登录'
|
||||
|
||||
},
|
||||
commons: {
|
||||
no_target_permission: '没有权限',
|
||||
|
||||
@ -52,9 +52,9 @@ service.interceptors.request.use(
|
||||
}
|
||||
)
|
||||
|
||||
const defaultOptions = {
|
||||
confirmButtonText: i18n.t('login.re_login')
|
||||
}
|
||||
// const defaultOptions = {
|
||||
// confirmButtonText: i18n.t('login.re_login')
|
||||
// }
|
||||
|
||||
const checkAuth = response => {
|
||||
// 请根据实际需求修改
|
||||
@ -66,7 +66,10 @@ const checkAuth = response => {
|
||||
store.dispatch('user/logout').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}, defaultOptions)
|
||||
}, {
|
||||
confirmButtonText: i18n.t('login.login_again'),
|
||||
showClose: false
|
||||
})
|
||||
}
|
||||
|
||||
if (response.headers['authentication-status'] === 'invalid') {
|
||||
@ -75,6 +78,9 @@ const checkAuth = response => {
|
||||
store.dispatch('user/logout').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}, {
|
||||
confirmButtonText: i18n.t('login.login_again'),
|
||||
showClose: false
|
||||
})
|
||||
}
|
||||
// token到期后自动续命 刷新token
|
||||
|
||||
@ -43,7 +43,8 @@ export function baseRadarOption(chart_option, chart) {
|
||||
data: [
|
||||
{
|
||||
value: y.data,
|
||||
name: y.name
|
||||
name: y.name,
|
||||
label: y.label
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user