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

feat: model-panel（是否同步的开关未加）

Browse Source
This commit is contained in:
chenjinsong
2020-05-19 20:26:11 +08:00
parent 958cd3dc2f
commit bee01aad49
6 changed files with 756 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -643,7 +643,6 @@ li{
display: flex;
align-items: center;
justify-content: center;
padding-top: 3px;
cursor: ns-resize;
}
.sub-list-window-control {

8
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -37,6 +37,10 @@
<common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
</template>
<!-- model-panel/asset-detail/project-overview的panel-->
<panel-tab v-if="from == 'model' && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj"></panel-tab>
</div>
</span>
</template>
@@ -47,15 +51,17 @@
import alertMessageTab from "./tabs/alertMessageTab";
import endpointQueryTab from "./tabs/endpointQueryTab";
import endpointTab from "./tabs/endpointTab";
import panelTab from "./tabs/panelTab";
export default {
name: "cabinetBox",
name: "bottomBox",
components:{
'common-detail-tab': commonDetailTab,
'cabinet-tab': cabinetTab,
'alert-message-tab': alertMessageTab,
'endpoint-query-tab': endpointQueryTab,
'endpoint-tab': endpointTab,
'panel-tab': panelTab,
},
props: {
isFullScreen: false, //是否全屏

634
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue Normal file
View File

@@ -0,0 +1,634 @@
<template>
<div class="panel sub-list">
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">
<template v-if="from == 'model'">{{obj.name}}</template>
</div><div class="sub-list-tab">{{$t("dashboard.panel.title")}}</div>
</div>
<div class="top-tool-right">
<div class="top-tool-search margin-r-20">
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
</el-input>
</div>
<div class="panel-calendar margin-r-20" v-if="from != 'model'">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange" style="height: 26px; margin-top: -1px;"></time-picker>
</div>
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from != 'model'">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
</button><el-popover
v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
@click="selectInterval(i.value)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0"
class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button>
</el-popover>
</div>
<button @click="toAddChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<div class="table-list" id="tableList">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
<div class="box-content">
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
ref="chartList"></chart-list>
</div>
</el-scrollbar>
</div>
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
<chart-box ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</div>
</template>
<script>
import ChartBox from "../../../page/dashboard/chartBox";
import ChartList from '../../../charts/chart-list';
import bus from '../../../../libs/bus';
import timePicker from '../../../common/timePicker'
export default {
name: "panel",
props: {
from: String,
obj: Object
},
data() {
return {
showTopBtn: false, //top按钮
visible: false,
rightBox: { //面板弹出框相关
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
},
tableHover: false,
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
],
intervalTimer: null,
intervalList: [{
value: 0,
name: this.$t("dashboard.panel.refreshInterval.never"),
}, {
value: 60,
name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
}, {
value: 180,
name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
}, {
value: 300,
name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
}, {
value: 600,
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
}],
interval: 0,
panel: { //新增panel
id: '',
name: ''
},
chart: {
id: '',
title: '',
type: 'line',
span: 12,
height: 400,
elements: {
id: '',
expression: '',
type: ''
}
},
pageObj: {
pageNo: 1,
pageSize: -1, //此处获取所有数据，所以设置一个较大的值
total: 0
},
chartsData: [], //中间部分图表相关数据
panelData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
],
},
searchLabel: {}, //搜索参数
//---图表相关参数--start
dataList: [], // 数据列表
//searchName: '', // 搜索名称
filter: { // 过滤条件
//productId: 0,
panelId: 0,
start_time: '',
end_time: '',
searchName: ''
},
showPanel: {
name: '',
type: 'model',
id: ''
},
panelId: 0,
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
}
},
components: {
'chart-box': ChartBox,
'chart-list': ChartList,
'time-picker':timePicker
},
methods: {
//刷新
Refresh() {
this.getTableData();
},
refreshTime(st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
this.searchTime = [startTime, endTime];
},
panelReloadForDel: function () {
this.getTableData();
},
/*图表相关操作--start*/
toAddChart: function () {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
},
scrollbarHeightHandler() {
setTimeout(() => {
let top = '';
let top2 = '';
document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
if (top) {
yDom.style.top = top;
} else {
top = yDom.style.top;
}
if (top2) {
yDom2.style.top = top2;
} else {
top2 = yDom2.style.top;
}
});
}, 100);
},
// 编辑图表信息,打开编辑弹窗
editData(data) {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.editData(data, this.panelId);
},
// 移除图表:弹出确认框询问
removeData(data,from) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/" + this.panelId + "/charts?ids=" + data.id).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
type: 'success',
message: this.$t("tip.deleteSuccess")
});
let chartList=this.$refs.chartList.dataList;
for (let i =0;i< chartList.length;i++){
if(chartList[i].id === data.id){
chartList.splice(i,1);
break;
}
}
this.getTableData(); //删除相关图表后，刷新面板数据
} else {
console.error(response.msg);
this.$message.error(response.msg);
}
})
});
},
delChartOk() {
this.getData(this.filter);
},
// 图表创建成功，回调panel页面，进行图表的刷新
createSuccess(msg, data, params) {
this.getData(this.filter);
},
// 获取数据,用在子页面
getData(params) {
if (params.start_time === '' || params.end_time === '') {
let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp;
params.end_time = endTimeTmp;
}
if(this.$refs.chartList){
this.$refs.chartList.initData(params);
}
},
/*图表相关操作--end*/
/*时间条件查询--start*/
// 选择日期变化
dateChange(val) {
this.searchTime = [...val];
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.panelId;
this.getData(this.filter);
},
/*时间条件查询--end*/
//公用操作
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
getTableData(linkId) {
this.$get('panel', {pageNo: 1, pageSize: -1, type: this.from, link: linkId}).then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if (this.panelData.length > 0) {
this.panelId = this.filter.panelId = this.panelData[0].id;
this.getData(this.filter);
}
}else {
if(response.msg){
console.error(response.msg);
this.$message.error(response.msg);
}else if(response.error){
console.error(response.error);
this.$message.error(response.error);
}else {
console.error(response);
this.$message.error(response);
}
}
}).catch((error) => {
if (error) {
console.error(error);
this.$message.error(error.toString());
}
});
},
//定期刷新
selectInterval(val) {
this.visible = false;
clearInterval(this.intervalTimer);
if (val) {
this.interval = val;
const start = new Date(this.searchTime[1]);
const now = new Date();
const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
if (interval >= 60) { //如果结束时间到现在超过1分钟，则
this.getIntervalData(interval);
}
this.intervalTimer = setInterval(() => {
this.getIntervalData(this.interval);
}, val * 1000);
}
},
getIntervalData(interval) { //interval:结束时间到现在的秒数
const start = new Date(this.searchTime[0]);
const end = new Date(this.searchTime[1]);
start.setSeconds(start.getSeconds() + interval);
end.setSeconds(end.getSeconds() + interval);
const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
this.searchTime = [startTime, endTime];
//刷新数据
this.dateChange();
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData();
},
search:function(){
if(this.$refs.chartList){
this.$refs.chartList.searchCharts(this.filter.searchName);
}
},
// 滚动事件触发下拉加载
onScroll() {
let _self = this;
let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
scrollbarWrap.onscroll = function() {
if (scrollbarWrap.scrollTop > 50) {
_self.showTopBtn = true;
} else {
_self.showTopBtn = false;
}
if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.panelId);
}
}
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-inactive','query-input-active');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
this.$refs.queryPanel.focus();
},
blurInput:function(){
if(!this.filter.searchName || this.filter.searchName == ''){
setTimeout(function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
classVal=classVal.replace('query-input-active','query-input-inactive');
document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
},100)
}
},
clearInput:function(){
this.$refs.queryPanel.focus();
}
},
mounted: function () {
this.onScroll();
document.querySelector("#tableList").addEventListener("mouseenter", () => {
this.tableHover = true;
});
document.querySelector("#tableList").addEventListener("mouseleave", () => {
this.tableHover = false;
});
},
watch: {
'filter.searchName':function(n,o){
let temp=this;
setTimeout(function(){
temp.search();
},1000)
},
obj: {
immediate: true,
handler(n) {
this.getTableData(n.id);
}
}
}
}
</script>
<style scoped lang="scss">
.panel {
height: 100%;
}
.panel .el-table {
border-radius: 5px;
}
.panel-list-width {
width:240px;
}
.panel-dropdown-title {
line-height:24px;
padding-left:5px;
margin-left:10px;
margin-top: 3px;
text-align:left;
border-radius:4px;
width:120px;
height:24px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-title {
min-height:24px;
width:100px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-item {
width:190px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .el-icon-view {
color: #60BEFF;
}
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin-chart list*/
.table-list {
margin-top: 6px;
overflow-y: auto;
height: calc(100% - 56px);
}
.box-content {
position: relative;
}
/* end-chart list*/
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
.panel-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-create {
display: inline-block;
float: left;
font-size: 13px;
color: #F98D9A;
width: 100%;
}
.panel-dropdown-btn-create:hover {
color: #D96D7A;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
font-size: 13px
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.panel-dropdown-error-message {
color: #F98D9A;
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
.panel-select-width {
width: 150px;
}
.panel-refresh-interval {
margin-right: 5px;
float: right;
}
.panel-refresh-interval-select {
width: 95px;
}
.panel-calendar {
float: right;
margin-right: 1px;
}
.top-tools {
button {
background: $btn-light-background-color;
outline: none;
border: 1px solid #ccc;
}
button:hover {
background: $btn-light-background-color-hover;
}
}
.nz-dashboard-dropdown {
height: 300px;
overflow-y: auto;
li {
/*padding: 0 20px !important;*/
padding-left:20px !important;
padding-right:0px !important;
width:240px;
white-space:nowrap;
overflow-x:hidden;
text-overflow:ellipsis;
}
}
.nz-dashboard-dropdown-bg {
background: $global-text-color-active;
color: #fff;
}
.el-dropdown-link {
cursor: pointer;
font-weight: bold;
}
.refresh {
display: flex;
background: #fff;
border-radius: 4px;
align-items: center;
justify-content: center;
margin: 0 10px;
border: 1px solid #ccc;
background: $btn-light-background-color;
span {
display: inline-block;
padding: 1px 8px;
}
}
.popover_ul li {
padding: 10px 3px;
cursor: pointer;
}
.popover_ul li:hover {
background: $dropdown-hover-background-color !important;
color: $global-text-color-active !important;
}
.nz-dashboard-refresh {
border-right: 1px solid #ccc;
color: #F0BF84;
}
.nz-dashboard-picker {
}
</style>
<style lang="scss">
.panel .top-tools input {
background-color: $content-right-background-color;
}
.panel .top-tools .el-input__inner {
background-color: $content-right-background-color;
}
.panel-calendar .el-range-editor--mini.el-input__inner {
height: 25px !important;
border-color: #d8d8d8;
}
.panel-calendar .el-range-editor--mini .el-range__close-icon {
line-height: 18px;
}
.panel-calendar .el-range-editor--mini .el-range__icon {
display: none;
}
.panel-calendar .el-range-editor--mini .el-range-separator {
line-height: 17px;
}
.panel-calendar .el-date-editor--datetimerange.el-input, .panel-calendar .el-date-editor--datetimerange.el-input__inner {
padding-right: 0;
vertical-align: top;
}
.nz-dashboard-dropdown .nz-icon-edit {
font-size: 12px;
}
</style>

49
nezha-fronted/src/components/page/config/model.vue
View File

@@ -34,19 +34,21 @@
</div>
</div>
<div slot="content-right" class="slot-content">
<div class="top-tools">
<div class="top-tool-main-right">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createModel')"
id="model-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
v-loading="loading" :cell-class-name="assetStatClassName">
<el-table :data="tableData" border style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
v-loading="loading" :cell-class-name="assetStatClassName" v-show="mainResizeShow" :height="mainTableHeight">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot-scope="scope" :column="item">
@@ -65,7 +67,7 @@
</el-popover>
</template>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'model-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>-->
<span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
<span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
@@ -84,8 +86,13 @@
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" from="model" :targetTab.sync="targetTab" :obj="modelForPanel"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
</div>
</left-menu>
<element-set
v-clickoutside="elementsetHide"
@@ -104,6 +111,16 @@
name: "model",
data() {
return {
/*二级列表相关*/
targetTab: '', //展示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度
modelForPanel: {},
tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
@@ -218,6 +235,23 @@
clickos() {
this.rightBox.show = false;
},
panel(obj) {
this.showSubList = true;
this.modelForPanel = obj;
this.targetTab = "panel";
},
// 全屏
fullScreen() {
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
this.$bottomBoxWindow.listResize(vm, e);
},
toEdit: function (u) {
this.model = Object.assign({}, u);
this.$refs.modelBox.show(true, true);
@@ -341,6 +375,9 @@
: this.tableTitle;
},
watch: {
showSubList(n) {
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
}
}
</script>

11
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -47,17 +47,6 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!--<div class="top-tools">
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createPrometheusServer')"
id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>-->
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"

20
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -54,7 +54,7 @@
</style>
<template key="chartBox">
<div v-clickoutside="clickos">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
<transition name="right-box">
<div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
@@ -74,7 +74,7 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')" prop="panel">
<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="showPanel.type != 'model'">
<el-autocomplete
:fetch-suggestions="panelSuggestion"
v-model.trim="panelName2"
@@ -570,32 +570,34 @@
},
// 新建图表
addCharts(params) {
let panelId;
//先处理panel
let panelId = this.autocompleteExist(this.panelName2);
if (panelId) {
this.panelId = panelId;
if (this.showPanel.type == 'model') {
panelId = this.panelData[0].id;
} else {
panelId = this.autocompleteExist(this.panelName2);
if (!panelId) {
this.$post('panel', {name: this.panelName2}).then(response => {
if (response.code === 200) {
this.$emit("reloadOnlyPanel");
this.$store.commit('panelListChange', true);
panelId = this.autocompleteExist(this.panelName2);
} else {
if(response.msg){
this.$message.error(response.msg);
}else {
this.$message.error(response);
}
}
});
}
}
let intervalTime = 1; //设置3秒超时
let interval = setInterval(() => {
panelId = this.autocompleteExist(this.panelName2);
if (panelId) {
this.panelId = panelId;
console.log('___params___',params)
this.$post('panel/' + this.panelId + '/charts', params).then(response => {
if (response.code === 200) {
this.esc();
@@ -1018,6 +1020,7 @@
deep: true,
immediate: true,
handler(n, o) {
if (this.showPanel.type != 'model') {
if (this.selectFirstPanel) {
this.selectFirstPanel = false;
this.panelId = n[0].id;
@@ -1030,6 +1033,7 @@
}
}
}
}
},
beforeDestroy() {
if(this.$refs.chartTag){