gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-2124 feat：dashboard variables支持拖动调整位置

Browse Source
This commit is contained in:
zyh
2022-08-12 13:46:01 +08:00
parent 7978443786
commit 79ac925818
2 changed files with 159 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/package-lock.json generated
View File

@@ -3987,7 +3987,7 @@
},
"clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"requires": {
"good-listener": "^1.2.2",
@@ -6132,7 +6132,7 @@
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"delegates": {
@@ -8444,7 +8444,7 @@
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"requires": {
"delegate": "^3.1.2"
@@ -16360,7 +16360,7 @@
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"select-hose": {
@@ -17836,7 +17836,7 @@
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tinycolor2": {
@@ -18520,7 +18520,7 @@
},
"vue-clipboard2": {
"version": "0.3.3",
"resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"requires": {
"clipboard": "^2.0.0"

42
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -48,9 +48,23 @@
<div class="form__sub-title" style="margin-bottom:0px">
<span>{{$t('dashboard.panel.variables')}}</span>
</div>
<draggable
v-model="editPanel.param.variables"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-columns-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<el-row
:key="index"
v-for="(item,index) of editPanel.param.variables"
:key="item.uid"
>
<div class="variable-title">
<span class="variable-title-left">
@@ -71,6 +85,9 @@
<span @click="removeVariable(index)" class="nz-icon-minus-medium" style="margin-right: 6px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition name="el-zoom-in-top">
@@ -170,6 +187,7 @@
</div>
</transition>
</el-row>
</draggable>
<div @click="addVariable()" class="add-variable">{{$t('dashboard.panel.addVariable')}}</div>
</div>
@@ -317,8 +335,13 @@
import editRigthBox from '../mixin/editRigthBox'
import bus from '@/libs/bus'
import { arrLength, datePicker } from '@/components/common/js/validate'
import draggable from 'vuedraggable'
import { getUUID } from '@/components/common/js/common'
export default {
name: 'panelBox',
components: {
draggable
},
props: {
obj: {
type: Object
@@ -453,9 +476,6 @@ export default {
// 展开 折叠变量
dropVariable (index, item) {
this.$set(this.editPanel.param.variables[index], 'collapse', !item.collapse)
this.$refs.form.clearValidate('param.variables.' + index + '.name')
this.$refs.form.clearValidate('param.variables.' + index + '.customOptions')
this.$refs.form.clearValidate('param.variables.' + index + '.expression')
},
// 显示 隐藏变量
showVariable (index, item) {
@@ -467,7 +487,9 @@ export default {
show: true,
type: 'query',
multi: false,
allOption: false
allOption: false,
collapse: false,
uid: getUUID()
}
this.editPanel.param.variables.push(temp)
},
@@ -476,6 +498,7 @@ export default {
const temp = JSON.parse(JSON.stringify(item))
temp.name = temp.name ? temp.name + '_copy' : ''
temp.collapse = false
temp.uid = getUUID()
this.editPanel.param.variables.push(temp)
},
// 删除变量
@@ -510,10 +533,11 @@ export default {
/* 保存 */
save () {
// 保存时把collapse属性删除 再传入后台
// 保存时把无用属性删除 再传入后台
const variables = this.editPanel.param.variables.map((item) => {
const temp = JSON.parse(JSON.stringify(item))
delete temp.collapse
delete temp.uid
return temp
})
const params = {
@@ -624,10 +648,14 @@ export default {
handler (n, o) {
this.isEdit = true
this.editPanel = JSON.parse(JSON.stringify(n))
// 如果是空数组 则添加一条变量数据
// 若没有数据 默认设置为空数组
if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
const temp = []
this.$set(this.editPanel.param, 'variables', temp)
} else {
this.editPanel.param.variables.forEach(item => {
item.uid = getUUID()
})
}
}
},