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

NEZ-1072 feat: 主题切换

Browse Source
This commit is contained in:
chenjinsong
2021-11-01 17:23:01 +08:00
parent 1e017d3060
commit 914c096463
395 changed files with 23682 additions and 23372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -3,7 +3,7 @@
<div class="main-list">
<div>
<transition name="el-zoom-in-center">
<div class="loading" v-if="isLoading"></div>
<div v-if="isLoading" class="panel-loading"></div>
</transition>
</div>
<div class="main-container" style="padding-right: 0">
@@ -663,160 +663,6 @@ export default {
clearInput () {
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<oldIndex){//从后往前移动：
//console.log('从后往前移动：oldIndex='+oldIndex+',newIndex='+newIndex)
let newNextItem = this.panelData[newIndex+1];
newItem.next = newNextItem.id;
let nextItemIndexInTotal = -1;
this.dataTotalListBak.forEach((item,index)=>{
if(item.id===newNextItem.id){
nextItemIndexInTotal = index;
}
})
// console.log('从后往前移动：next元素在总列表中之前的元素的index='+nextItemIndexInTotal)
if(nextItemIndexInTotal>0){//总列表中：移动之后的当前元素后面的元素之前有元素
let prevItem = this.dataTotalListBak[nextItemIndexInTotal-1];
newItem.prev = prevItem.id;
}else{//之前无元素
newItem.prev = 0;
}
}else if(newIndex>oldIndex){//从前往后移动
//console.log('从前往后移动：oldIndex='+oldIndex+',newIndex='+newIndex)
let newPrevItem = this.panelData[newIndex-1];
newItem.prev = newPrevItem.id;
let prevItemIndexInTotal = -1;
this.dataTotalListBak.forEach((item,index)=>{
if(item.id===newPrevItem.id){
prevItemIndexInTotal = index;
}
});
//console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
newItem.next = nextItem.id;
}else{//之后无元素
newItem.next = -1;
}
}else {//oldIndex = newIndex
}
//更新图表prev和next
const modifyParams = {
id:newItem.id,
type:'dashboard',
prev:newItem.prev,
next:newItem.next,
};
if(this.panelData.length>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;
this.showPanelList = this.panelData.filter(item=> this.showPanelList.find(t=> t.id == item.id))
}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';
}, */
/* filterPanelFocus:function(e){
e.stopPropagation();
},
filterPanelFunc:function(){
let $self=this;
if($self.filterPanel&&$self.filterPanel.trim() != ''){
this.showPanelList=this.panelData.filter(item=>item.name.toLowerCase().indexOf($self.filterPanel.toLowerCase()) != -1)
}else{
this.showPanelList = this.panelData;
}
}, */
tableListEnter () {
this.tableHover = true
},
@@ -884,83 +730,8 @@ export default {
}
if (this.scrollbarWrap) {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
};
}
localStorage.removeItem('panelTime')
}
}
</script>
<style lang="scss">
.border-t-1-de{
border-top: 1px solid #dedede;
}
.border-t-1-tr{
border-top: 1px solid transparent;
}
.panel {
height: 100%;
display: flex;
flex-direction:column;
}
.panel .el-table {
border-radius: 5px;
}
/* begin-chart list*/
.table-list {
margin-top: 0px;
overflow-y: auto;
height: calc(100% - 50px);
flex: 1;
}
.box-content {
position: relative;
height: 100%;
}
.panel-select-header {
display: flex;
justify-content: space-evenly;
margin-bottom: 15px;
}
.panel-select-tail {
border-top: 1px solid #DEDEDE;
.panel-select-add {
line-height: 32px;
height: 32px;
display: inline-block;
cursor: pointer;
i {
color: #FA901C;
font-size: 12px;
font-weight: bold;
padding-left: 20px;
}
}
}
/* end-chart list*/
</style>
<style lang="scss">
@import '@/assets/css/common/tableCommon.scss';
</style>
<style scoped>
.loading {
position: fixed;
left: 250px;
top: 59px;
height: 100%;
width: 100%;
background: center center no-repeat #fff;
z-index: 10;
}
.show-panel-name{
display: inline-block;
padding: 0 7px;
font-weight: bold;
max-width: 310px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
vertical-align: bottom;
}
</style>