{{$t('dashboard.metric.normal')}}
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index ee1cdc48c..7a77ea24b 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -23,16 +23,31 @@
{{$t('dashboard.panel.createPanelTitleSec')}}
-
-
-
- {{item.name}}
-
-
-
-
-
+
+
+
+
+ {{item.name}}
+
+
+
+
+
+
@@ -96,7 +111,7 @@
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
import timePicker from '../../common/timePicker'
-
+ import draggable from 'vuedraggable'
export default {
name: "panel",
data() {
@@ -157,6 +172,8 @@
},
chartsData: [], //中间部分图表相关数据
panelData: [],
+ panelDataDragTmp:[],
+ dataTotalListBak:[],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
@@ -186,7 +203,8 @@
components: {
'chart-box': ChartBox,
'chart-list': ChartList,
- 'time-picker':timePicker
+ 'time-picker':timePicker,
+ draggable,
},
methods: {
//刷新
@@ -394,9 +412,10 @@
});
},
getTableData: function (clearShowPanel) {
- this.$get('panel?pageSize=-1').then(response => {
+ this.$get('panel?type=dashboard').then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
+ this.dataTotalListBak=[...response.data.list]
let isInitData = false;
if (response.data.list.length > 0) {
if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
@@ -538,7 +557,149 @@
},
clearInput:function(){
this.$refs.queryPanel.focus();
- }
+ },
+ start (event) {
+ // console.log('start', event, this.panelData);
+
+ event.item.querySelector('.panelContent').style.background = '#d8dce1';
+ let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
+ if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
+ projectAndAssetFeatureInfos.forEach(item => {
+ item.classList.remove("unfold");
+ item.classList.remove("fold");
+ });
+ }
+ this.panelDataDragTmp = [...this.panelData];
+ console.log(this.panelDataDragTmp)
+ },
+ end (event) {
+ // console.info("end event:", event)
+ let item = event.item;
+ let oldIndex = event.oldIndex;
+ let newIndex = event.newIndex;
+ let newItem = this.panelData[newIndex];
+ //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--start
+ let len = this.panelDataDragTmp.length;//移动之前的元素列表
+ let endIndex = len-1;
+ if(oldIndex===0){//挪动之前为第一个元素
+ let oldNextItem = this.panelDataDragTmp[oldIndex+1];
+ let nextItem = this.panelData.find(item => item.id === oldNextItem.id);
+ nextItem.prev = 0;
+ }else if(oldIndex===endIndex){//挪动之前为最后一个元素
+ let oldPrevItem = this.panelDataDragTmp[oldIndex-1];
+ let prevItem = this.panelData.find(item => item.id === oldPrevItem.id);
+ prevItem.next = -1;
+ }else{//挪动之前为中间元素
+ let oldPrevItem = this.panelDataDragTmp[oldIndex-1];
+ let oldNextItem = this.panelDataDragTmp[oldIndex+1];
+ let nextItem = this.panelData.find(item => item.id === oldNextItem.id);
+ let prevItem = this.panelData.find(item => item.id === oldPrevItem.id);
+ prevItem.next = oldNextItem.id;
+ nextItem.prev = oldPrevItem.id;
+ }
+
+ if(newIndex===0){//挪动之后为第一个元素
+ let newNextItem = this.panelData[newIndex+1];
+ newNextItem.prev = newItem.id;
+ }else if(newIndex===endIndex){//挪动之后为最后一个元素
+ let newPrevItem = this.panelData[newIndex-1];
+ newPrevItem.next =newItem.id;
+ }else{//挪动之后为中间元素
+ let newPrevItem = this.panelData[newIndex-1];
+ let newNextItem = this.panelData[newIndex+1];
+ newPrevItem.next = newItem.id;
+ newNextItem.prev = newItem.id;
+ }
+ //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--end
+
+ //前台总列表中的顺序也得修改（dataTotalList及dataTotalListBak），后台接口也得调用
+ if(newIndex
1 && oldIndex !== newIndex){
+ this.$put('panel/modify',modifyParams).then(response => {
+ if (response.code === 200) {
+ //修改前台列表中元素的顺序
+ let curItem = this.dataTotalListBak.find((item,index)=>{return newItem.id===item.id});
+ let curIndex = this.dataTotalListBak.indexOf(curItem);
+ this.dataTotalListBak.splice(curIndex,1);
+
+ let nextItemTmp = this.dataTotalListBak.find((item)=>{return item.id===newItem.next});
+ if(nextItemTmp){
+ let nextIndex = this.dataTotalListBak.indexOf(nextItemTmp);
+ this.dataTotalListBak.splice(nextIndex,0,newItem);
+ }else{//移动到最后一个元素
+ this.dataTotalListBak.push(newItem);
+ }
+ this.panelData = this.dataTotalListBak;
+ }else {
+ if(response.msg){
+ this.$message.error(response.msg);
+ }else if(response.error){
+ this.$message.error(response.error);
+ }else {
+ this.$message.error(response);
+ }
+ }
+ });
+ }
+ let chartTitle = item.querySelector('.panelContent');
+ chartTitle.style.background = '';
+ },
+ move (event, orgin) {
+ // console.log('move', event, orgin);
+ let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green fallback-class choose-class:purple
+ // console.log('move---class', dragClass);
+ //dragClass.style.opacity = 1;
+ //dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
+ let panelContent = dragClass.querySelector('.panelContent');
+ panelContent.style.background = '#d8dce1';
+
+ },
},
created() {
this.getTableData();