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

Merge branch 'dev-3.3' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

Browse Source
This commit is contained in:
zhangyu
2022-06-06 10:42:47 +08:00
parent 9e00620e12 d15587d399
commit b3e38f64d0
9 changed files with 482 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -46,6 +46,16 @@
}
.top-tool-left {
display: flex;
.nz-icon-xingzhuang{
color: $--color-text-regular;
cursor: pointer;
transform:translateY(2px)
}
.nz-icon-a-xingzhuang2{
color:#FF9219 !important;
cursor: pointer;
transform:translateY(2px) scale(1.2);
}
}
}
.panel-top-tools{

162
nezha-fronted/src/assets/css/components/common/popBox/selectDashboard.scss Normal file
View File

@@ -0,0 +1,162 @@
.movable {
.el-tree-node__content {
cursor: move;
.tree--node > span:first-of-type {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.tree--node > span:last-of-type > span {
cursor: pointer;
}
}
.el-dropdown-menu__item {
padding: 0;
div {
padding: 0 20px;
}
}
}
.tree--node > span:last-of-type > span > i {
font-weight: normal !important;
}
.select-panel-tree {
height: 350px;
overflow: auto;
}
.select-panel-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-panel-tree .el-tree-node__content:hover {
color: $--color-primary;
}
.select-panel-tree .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: $--background-color-base;
font-weight: bold;
color: $--color-primary;
}
.tree--node {
display: flex;
justify-content: space-between;
width: calc(100% - 28px);
}
.tree--node span:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.tree--operation {
opacity: 0;
}
.tree--node:hover .tree--operation {
opacity: 1;
}
.panel-dropdown-btn {
color: #60BEFF;
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.panel-select-wrap{
width: 100%;
height: 402px;
display: flex;
justify-content: space-between;
.panel-select-left{
width: 170px;
height: 100%;
box-sizing: border-box;
border-right:1px solid $--border-color-base;
padding: 12px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
.panel-select-list{
width: 100%;
.panel-select-item{
font-family: Roboto-Regular;
font-size: 14px;
font-weight: 400;
color: $--color-text-primary;
display: flex;
align-items: center;
width: 100%;
height: 36px;
cursor: pointer;
i{
margin-left: 20px;
margin-right: 6px;
width: 22px;
display: flex;
justify-content: center;
color: $--color-text-regular;
}
}
.panel-select-item:hover{
color: #FA901C;
background: $--background-color-base;
i{
color: #FA901C;
}
}
.panel-select-item.active{
color: #FA901C;
background: $--background-color-base;
i{
color: #FA901C;
}
}
}
.dashboard-select-tail{
border: none;
display: flex;
justify-content: center;
.dashboard-select-add{
width: 88%;
height: 30px;
background: #FF9219;
border-radius: 2px;
color: #fff;
display: flex;
font-size: 14px;
justify-content: center;
align-items: center;
i{
color: #fff;
padding-left: 0;
}
}
}
}
.pop-item-wider{
flex: 1;
width: calc(100% - 170px);
padding-top: 0;
.panel-select-header{
margin-top: 12px;
margin-bottom: 8px;
}
}
.nz-icon-xingzhuang{
color: $--color-text-regular;
font-weight: normal;
}
.nz-icon-a-xingzhuang2{
color:#FF9219 !important;
transform: scale(1.2);
}
}

1
nezha-fronted/src/assets/css/components/common/popBox/selectPanel.scss
View File

@@ -70,3 +70,4 @@
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -22,6 +22,7 @@
@import './common/popBox/selectAssetMetaGroup.scss';
@import './common/popBox/selectAssetType.scss';
@import './common/popBox/selectPanel.scss';
@import './common/popBox/selectDashboard.scss';
@import './common/popBox/selectWalk.scss';
@import './common/project/popData/Info.scss';
@import './common/project/L5/popData/common.scss';

9
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

1
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -144,7 +144,6 @@ export default {
},
// 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
console.log(isRefresh)
this.loading = true
// TODO assetInfo、endpointInfo、echarts等进行不同的处理
let startTime = ''

255
nezha-fronted/src/components/common/popBox/selectDashboard.vue Normal file
View File

@@ -0,0 +1,255 @@
<template>
<el-popover :placement="placement" popper-class="'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" transition="slide" v-model="popBox.show" :width="500" :disabled="disabled">
<div class="panel-select-wrap">
<div class="panel-select-left">
<ul class="panel-select-list">
<li class="panel-select-item" :class="{active:currentTab===item.value}" v-for="item in tabList" :key="item.value" @click="tabChange(item.value)">
<i class="nz-icon" :class="item.icon"></i>
<span>{{item.name}}</span>
</li>
</ul>
<div slot="default">
<slot name="tail"></slot>
</div>
</div>
<div class="pop-item-wider">
<div class="panel-select-header">
<el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="padding:0 12px"></el-input>
</div>
<div :class="{'movable': !panelLock}" class="select-panel-tree">
<el-tree
:data="panelData"
:draggable="!panelLock"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}"
@node-click="selectDashboard"
@node-drop="nodeDrop"
check-on-click-node
check-strictly
default-expand-all
highlight-current
node-key="id"
ref="panelTree">
<div class="tree--node" slot-scope="{ node, data }">
<span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
<el-row class="block-col-2" style="margin-left:10px">
<el-col>
<el-dropdown v-if="!panelLock" placement="bottom-end" trigger="click" style="margin-right:10px">
<span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
<div @click="editPanel(data)" v-has="'main_edit'"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-if="data.id">
<i v-if="data.starred" class="nz-icon nz-icon-a-xingzhuang2" @click.stop="delStarred(data)"></i>
<i v-else class="nz-icon nz-icon-xingzhuang" @click.stop="addStarred(data)"></i>
</template>
</el-col>
</el-row>
</div>
</el-tree>
</div>
</div>
</div>
<div slot="reference">
<slot name="trigger"></slot>
</div>
</el-popover>
</template>
<script>
import bus from '@/libs/bus'
export default {
name: 'selectDashboard',
props: {
placement: { type: String },
panelData: { type: Array },
showPanel: { type: Object },
panelLock: { type: Boolean, default: true },
disabled: { type: Boolean, default: false }
},
mounted () {
this.$refs.panelTree.setCurrentKey(this.panel)
},
watch: {
filterPanel: {
immediate: true,
handler (n) {
this.$refs.panelTree && this.$refs.panelTree.filter(n)
this.$refs.starredTree && this.$refs.starredTree.filter(n)
}
},
showPanel: {
immediate: true,
handler (n) {
if (n) {
this.panel = JSON.parse(JSON.stringify(n))
}
}
}
},
data () {
return {
popBox: { show: false },
panel: { id: 0, name: '' },
tabList: [
{ name: '全部仪表盘', icon: 'nz-icon-a-leimucuquanbu', value: 'all' },
{ name: '我的收藏', icon: 'nz-icon-xingzhuang', value: 'starred' },
{ name: '我的创建', icon: 'nz-icon-wodechuangjian', value: 'create' },
{ name: '最近浏览', icon: 'nz-icon-liulanlishi', value: 'browse' }
],
currentTab: 'all',
filterPanel: ''
}
},
methods: {
// 左侧tab点击
tabChange (value) {
if (this.currentTab !== value) {
this.currentTab = value
console.log(666)
}
},
// 获取收藏的列表
async getStarred (type) {
// const params = {
// type: 'panel'
// }
// const response = await this.$get('/sys/user/starred', params)
// if (response.code === 200) {
// this.tempArr = []
// this.recursionStarred(this.panelData, response.data.list)
// if (type === 'tree') {
// // 刷新树形控件
// this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
// } else {
// this.$emit('refreshStarred', { data: this.panelData })
// }
// }
},
// 比对收藏的列表和全部列表 改变状态
recursionStarred (allList, starredList) {
allList.forEach((item) => {
item.starred = false
starredList.forEach((subItem) => {
// 判断全部列表每一项的id和收藏列表每一项的id是否相等
if (item.id === subItem.tid) {
if (this.tempArr.every(val => val.id !== item.id)) {
item.starred = true
this.tempArr.push({
...item,
children: []
})
}
}
})
if (item.children && item.children.length) {
this.recursionStarred(item.children, starredList)
}
})
},
// 格式化收藏列表 (树形)
formatStarred (list) {
const arr = JSON.parse(JSON.stringify(list))
arr.reverse()
for (let i = 0; i < arr.length; i++) {
if (arr[i].pid) {
// 找到父级所在下标
const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
if (parentIndex > -1) {
arr[parentIndex].children.unshift(arr[i])
arr.splice(i, 1)
i--
}
}
}
return arr.reverse()
},
// 新增收藏
addStarred: bus.debounceFn(function (data) {
const params = {
type: 'panel',
tid: data.id
}
this.$post('/sys/user/starred', params).then(async response => {
if (response.code === 200) {
await this.getStarred()
data.starred = true
}
})
},
300, true),
// 删除收藏
delStarred: bus.debounceFn(function (data) {
this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
if (response.code === 200) {
await this.getStarred()
data.starred = false
}
})
},
300, true),
/*
* node: 被拖的节点
* relative: 发生关系的节点
* position: ['before', 'after', 'inner'] 与relative节点的关系
* */
nodeDrop (node, relative, position, event) {
if (position === 'inner') {
node.data.pid = relative.data.id
} else {
node.data.pid = relative.data.pid
}
this.updateWeight()
},
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
updateWeight () {
const toUpdate = []
let count = 0
handler(this.panelData)
function handler (panelData) {
panelData.forEach(panel => {
panel.weight = count++
toUpdate.push({ id: panel.id, pid: panel.pid, weight: panel.weight })
if (panel.children && panel.children.length > 0) {
handler(panel.children)
}
})
}
this.getStarred()
this.$put('visual/panel/tree', toUpdate)
},
deletePanel (data) {
this.$emit('deletePanel', data)
},
editPanel (data) {
this.$emit('editPanel', data)
},
esc () {
this.popBox.show = false
},
// 确认选择某个节点，与父组件交互
selectDashboard (data, checked, child) {
// 判断是否点击的Starred Panels或All Panels
if (!data.id) {
this.$refs.panelTree.setCurrentKey(this.showPanel)
return false
}
this.$emit('selectDashboard', data)
this.$refs.panelTree.setCurrentKey(data)
this.esc()
}
}
}
</script>

185
nezha-fronted/src/components/common/popBox/selectPanel.vue
View File

@@ -2,46 +2,12 @@
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
<div>
<div class="pop-item-wider">
<slot name="header"></slot>
<div :class="{'movable': !panelLock}" class="select-panel-tree">
<el-tree
v-show="starredData[0].children.length"
:data="starredData"
:expand-on-click-node="false"
:filter-node-method="filterNode"
:props="{label: 'name', children: 'children'}"
@node-click="selectPanel"
default-expand-all
node-key="id"
ref="starredTree"
style="margin-bottom:5px"
class="starred-tree"
>
<div class="tree--node" slot-scope="{ node, data }">
<span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
<el-row class="block-col-2" style="margin-left:10px">
<el-col>
<el-dropdown v-if="!panelLock" placement="bottom-end" trigger="click" style="margin-right:10px">
<span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
<div @click="editPanel(data)" v-has="'main_edit'"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-if="data.id">
<i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
<i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
</template>
</el-col>
</el-row>
</div>
</el-tree>
<el-tree
:data="treeData"
:data="panelData"
:draggable="!panelLock"
:expand-on-click-node="false"
:filter-node-method="filterNode"
@@ -55,24 +21,20 @@
node-key="id"
ref="panelTree">
<div class="tree--node" slot-scope="{ node, data }">
<span :title="data.id?node.label + ' (' + data.chartNum +' charts）':''" :class="{'select-panel-title':data.id===0}">{{ node.label }}</span>
<el-row class="block-col-2" style="margin-left:10px">
<span :title="node.label + ' (' + data.chartNum +' charts）' ">{{ node.label }}</span>
<el-row class="block-col-2" v-if="!panelLock" style="width: 35px;">
<el-col>
<el-dropdown v-if="!panelLock" placement="bottom-end" trigger="click" style="margin-right:10px">
<el-dropdown placement="bottom-end" trigger="click">
<span class="el-dropdown-link tree--operation" @click.stop><i class="nz-icon nz-icon-more1"></i></span>
<el-dropdown-menu class="right-box-select-top" slot="dropdown" v-has="['main_edit', 'main_delete']">
<el-dropdown-item>
<div @click="editPanel(data)" v-has="'main_edit'"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
<div @click="editPanel(data)"><i v-has="'panel_edit'" class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="deletePanel(data)" v-has="'main_delete'"><i class="nz-icon nz-icon-delete"></i>{{$t('overall.delete')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<template v-if="data.id">
<i v-if="data.starred" class="el-rate__icon el-icon-star-on" @click.stop="delStarred(data)"></i>
<i v-else class="el-rate__icon el-icon-star-off" @click.stop="addStarred(data)"></i>
</template>
</el-col>
</el-row>
</div>
@@ -90,7 +52,6 @@
</template>
<script>
import bus from '@/libs/bus'
export default {
name: 'selectPanel',
props: {
@@ -111,7 +72,6 @@ export default {
immediate: true,
handler (n) {
this.$refs.panelTree && this.$refs.panelTree.filter(n)
this.$refs.starredTree && this.$refs.starredTree.filter(n)
}
},
showPanel: {
@@ -121,14 +81,6 @@ export default {
this.panel = JSON.parse(JSON.stringify(n))
}
}
},
panelData: {
immediate: true,
handler (n) {
if (n) {
this.treeData[0].children = n
}
}
}
/* panel: {
immediate: true,
@@ -143,108 +95,10 @@ export default {
data () {
return {
popBox: { show: false },
panel: { id: 0, name: '' },
// 全部列表
treeData: [
{
id: 0,
name: 'All Panels',
children: []
}
],
// 收藏夹列表
starredData: [
{
id: 0,
name: 'Starred Panels',
children: []
}
],
tempArr: []
panel: { id: 0, name: '' }
}
},
methods: {
// 获取收藏的列表
async getStarred (type) {
const params = {
type: 'panel'
}
const response = await this.$get('/sys/user/starred', params)
if (response.code === 200) {
this.tempArr = []
this.recursionStarred(this.panelData, response.data)
this.starredData[0].children = this.formatStarred(this.tempArr)
if (type === 'tree') {
// 刷新树形控件
this.$emit('refreshStarred', { data: this.panelData, type: 'tree' })
} else {
this.$emit('refreshStarred', { data: this.panelData })
}
}
},
// 比对收藏的列表和全部列表 改变状态
recursionStarred (allList, starredList) {
allList.forEach((item) => {
item.starred = false
starredList.forEach((subItem) => {
// 判断全部列表每一项的id和收藏列表每一项的id是否相等
if (item.id === subItem.tid) {
if (this.tempArr.every(val => val.id !== item.id)) {
item.starred = true
this.tempArr.push({
...item,
children: []
})
}
}
})
if (item.children && item.children.length) {
this.recursionStarred(item.children, starredList)
}
})
},
// 格式化收藏列表 (树形)
formatStarred (list) {
const arr = JSON.parse(JSON.stringify(list))
arr.reverse()
for (let i = 0; i < arr.length; i++) {
if (arr[i].pid) {
// 找到父级所在下标
const parentIndex = arr.findIndex(subItem => subItem.id === arr[i].pid)
if (parentIndex > -1) {
arr[parentIndex].children.unshift(arr[i])
arr.splice(i, 1)
i--
}
}
}
return arr.reverse()
},
// 新增收藏
addStarred: bus.debounceFn(function (data) {
const params = {
type: 'panel',
tid: data.id
}
this.$post('/sys/user/starred', params).then(async response => {
if (response.code === 200) {
await this.getStarred()
data.starred = true
}
})
},
300, true),
// 删除收藏
delStarred: bus.debounceFn(function (data) {
this.$delete('/sys/user/starred?type=panel&tid=' + data.id).then(async response => {
if (response.code === 200) {
await this.getStarred()
data.starred = false
}
})
},
300, true),
/*
* node: 被拖的节点
* relative: 发生关系的节点
@@ -265,8 +119,8 @@ export default {
updateWeight () {
const toUpdate = []
let count = 0
handler(this.panelData)
function handler (panelData) {
panelData.forEach(panel => {
panel.weight = count++
@@ -276,7 +130,7 @@ export default {
}
})
}
this.getStarred()
this.$put('visual/panel/tree', toUpdate)
},
deletePanel (data) {
@@ -290,11 +144,6 @@ export default {
},
// 确认选择某个节点，与父组件交互
selectPanel (data, checked, child) {
// 判断是否点击的Starred Panels或All Panels
if (!data.id) {
this.$refs.panelTree.setCurrentKey(this.showPanel)
return false
}
this.$emit('selectPanel', data)
this.$refs.panelTree.setCurrentKey(data)
this.esc()
@@ -302,17 +151,3 @@ export default {
}
}
</script>
<style scoped>
.starred-tree>>>.el-tree__empty-block{
display: none;
}
.el-rate__icon{
color: #C0C4CC !important;
cursor: pointer;
margin-right: 0px;
}
.el-icon-star-on{
color:#FF9219 !important;
transform: scale(1.2);
}
</style>

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

@@ -13,10 +13,9 @@
</div>
<template v-else>
<div class="top-tool-left" style="cursor: pointer;">
<select-panel
ref="selectPanel"
<select-dashboard
ref="selectDashboard"
@refreshStarred="refreshStarred"
:filter-panel="filterPanel"
:panel-data="panelData"
:panel-lock="panelLock"
:placement="'bottom-start'"
@@ -24,26 +23,23 @@
style="display: inline-block;padding: 0"
@deletePanel="del"
@editPanel="edit"
@selectPanel="panelChange">
<template v-slot:header>
<div class="panel-select-header">
<el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="mini" style="width: 286px;"></el-input>
<!-- <span id="panel-list-toadd" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span> -->
</div>
</template>
@selectDashboard="panelChange">
<template v-slot:trigger>
<i style="color: #BEBEBE" class="el-icon-menu"></i>
<span :title="showPanel.name + ' (' + showPanel.chartNum +' charts）' " class="show-panel-name">{{showPanel.name}}</span>
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="el-rate__icon el-icon-star-on"></i>
<i @click.stop="addStarred(showPanel)" v-else class="el-rate__icon el-icon-star-off"></i>
<i @click.stop="delStarred(showPanel)" v-if="showPanel.starred" class="nz-icon nz-icon-a-xingzhuang2"></i>
<i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang"></i>
</template>
<template v-slot:tail>
<div class="panel-select-tail">
<span id="panel-list-toadd" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{ $t('overall.addProject') }}</span>
<div class="dashboard-select-tail">
<span class="dashboard-select-add" v-has="'main_add'" :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd">
<i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t('overall.addDashboard')}}
</span>
</div>
</template>
</select-panel>
</select-dashboard>
</div>
<div class="top-tool-right">
<!-- <div class="top-tool-search margin-r-20">-->
<!-- <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">-->
@@ -51,15 +47,14 @@
<!-- </el-input>-->
<!-- </div>-->
<!-- 切换查看模式 -->
<button slot="reference" class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
<i class="el-icon-monitor"></i>
</button>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
<button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
type="button" @click="addChartBefore">
<!-- 切换查看模式 -->
<button slot="reference" class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
<i class="nz-icon nz-icon-moshiqiehuan"></i>
</button>
<button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -159,7 +154,7 @@
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
import bus from '../../../libs/bus'
import pickTime from '../../common/pickTime'
import selectPanel from '../../common/popBox/selectPanel'
import selectDashboard from '../../common/popBox/selectDashboard'
import panelBox from '@/components/common/rightBox/panelBox'
import chartTempBox from '@/components/common/rightBox/chartTempBox'
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
@@ -284,7 +279,6 @@ export default {
id: 4
},
panelId: 0,
filterPanel: '',
// ---图表相关参数--end
scrollbarWrap: null,
batchDeleteObjs: [],
@@ -300,7 +294,7 @@ export default {
'pick-time': pickTime,
'panel-box': panelBox,
topToolMoreOptions,
selectPanel,
selectDashboard,
chartTempBox,
chartRightBox
},
@@ -318,25 +312,24 @@ export default {
methods: {
// 刷新树形菜单视图
refreshStarred ({ data, type }) {
if (type === 'tree') {
this.panelData = JSON.parse(JSON.stringify(data))
}
this.$nextTick(() => {
this.$refs.selectPanel.$refs.starredTree.filter(this.filterPanel)
this.$refs.selectPanel.$refs.panelTree.filter(this.filterPanel)
this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
})
// 判断当前页面收藏状态
const starredArr = this.$refs.selectPanel.tempArr
this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
// if (type === 'tree') {
// this.panelData = JSON.parse(JSON.stringify(data))
// }
// this.$nextTick(() => {
// // this.$refs.selectDashboard.$refs.panelTree.filter(this.filterPanel)
// this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
// })
// // 判断当前页面收藏状态
// const starredArr = this.$refs.selectDashboard.tempArr
// this.showPanel.starred = starredArr.some(item => item.id === this.showPanel.id)
},
// 新增收藏
addStarred (data) {
this.$refs.selectPanel.addStarred(data)
this.$refs.selectDashboard.addStarred(data)
},
// 删除收藏
delStarred (data) {
this.$refs.selectPanel.delStarred(data)
this.$refs.selectDashboard.delStarred(data)
},
// 刷新
refreshPanel () {
@@ -692,7 +685,7 @@ export default {
let isInitData = false
this.panelData = JSON.parse(JSON.stringify(response.data.list))
this.$nextTick(() => {
this.$refs.selectPanel.getStarred('tree')
this.$refs.selectDashboard.getStarred('tree')
})
if (response.data.list.length > 0) {
if (this.$store.state.showPanel.id > 0 && this.$store.state.showPanel.name) {
@@ -712,7 +705,7 @@ export default {
}
this.$nextTick(() => {
try {
this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
this.$refs.selectDashboard.$refs.panelTree.setCurrentKey(this.showPanel)
} catch (e) {}
})
this.isLoading = false
@@ -1011,8 +1004,11 @@ export default {
this.$store.commit('setMode', this.mode)
this.$nextTick(() => {
setTimeout(() => {
this.$refs.chartList.resize()
}, 200)
try {
this.$refs.chartList.resize()
} catch (error) {
}
}, 300)
})
if (this.nowTimeType.type) {
this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.nowTimeType)
@@ -1117,16 +1113,6 @@ export default {
}
</script>
<style scoped>
.el-rate__icon{
color: #C0C4CC !important;
cursor: pointer;
margin-right: 0px;
transform: translateY(1px);
}
.el-icon-star-on{
color:#FF9219 !important;
transform: translateY(1px) scale(1.2);
}
.view-mode{
margin-right: 10px;
display: flex;