Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-2.0
This commit is contained in:
@changcode
@@ -1290,11 +1290,11 @@ li{
|
||||
}
|
||||
.right-box-form .one-third-form-item-left{
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
.right-box-form .one-third-form-item-right{
|
||||
display: inline-block;
|
||||
width: 170px;
|
||||
width: calc(50% - 5px);
|
||||
.el-form-item__label{
|
||||
width: 20px !important;
|
||||
}
|
||||
@@ -2169,13 +2169,13 @@ li{
|
||||
height: 70px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.right-box-form>.el-form-item.half-form-item-other{
|
||||
.right-box-form .half-form-item-other{
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
width: calc(50% - 30px);
|
||||
}
|
||||
.right-box-form>.el-form-item.half-form-item-other-two{
|
||||
.right-box-form .half-form-item-other-two{
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
width: calc(50% - 30px);
|
||||
margin-left: 0;
|
||||
}
|
||||
.right-box .right-box-form-add,.right-box .right-box-form-minus-box{
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -319,23 +319,23 @@ export default {
|
||||
oldSearchTime: [],
|
||||
|
||||
assetKey: {
|
||||
host: this.$t('asset.tableTitle.host'),
|
||||
host: this.$t('asset.host'),
|
||||
id: 'Id',
|
||||
assetType: this.$t('asset.tableTitle.assetType'),
|
||||
sn: this.$t('asset.tableTitle.device'),
|
||||
state: this.$t('asset.tableTitle.assetState'),
|
||||
pingRtt: this.$t('asset.tableTitle.assetPing'),
|
||||
dataCenter: this.$t('asset.tableTitle.dataCenter'),
|
||||
cabinet: this.$t('asset.tableTitle.cabinet'),
|
||||
model: this.$t('asset.tableTitle.model'),
|
||||
vendor: this.$t('asset.tableTitle.vendor'),
|
||||
purchaseDate: this.$t('asset.tableTitle.procurementDate'),
|
||||
principal: this.$t('asset.tableTitle.principal'),
|
||||
tel: this.$t('asset.tableTitle.principalTel'),
|
||||
pingStatus: this.$t('asset.tableTitle.assetPing'),
|
||||
pingLastReply: this.$t('asset.tableTitle.lastReply'),
|
||||
endpoint: this.$t('asset.tableTitle.modules'),
|
||||
alert: this.$t('asset.tableTitle.alerts'),
|
||||
assetType: this.$t('asset.assetType'),
|
||||
sn: this.$t('asset.device'),
|
||||
state: this.$t('asset.assetState'),
|
||||
pingRtt: this.$t('asset.assetPing'),
|
||||
dataCenter: this.$t('asset.dataCenter'),
|
||||
cabinet: this.$t('asset.cabinet'),
|
||||
model: this.$t('asset.model'),
|
||||
vendor: this.$t('asset.vendor'),
|
||||
purchaseDate: this.$t('asset.procurementDate'),
|
||||
principal: this.$t('asset.principal'),
|
||||
tel: this.$t('asset.principalTel'),
|
||||
pingStatus: this.$t('asset.assetPing'),
|
||||
pingLastReply: this.$t('asset.lastReply'),
|
||||
endpoint: this.$t('asset.modules'),
|
||||
alert: this.$t('asset.alerts'),
|
||||
tags: this.$t('overall.tag')
|
||||
},
|
||||
projectKey: {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
{{chartData.name}}
|
||||
<span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
|
||||
</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -230,6 +230,8 @@ import textChart from './text-chart'
|
||||
import chartPie from './chart-pie'
|
||||
import chartBarStatis from './chart-bar-statistics'
|
||||
import chartGroup from './chart-group'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
import chartTempData from "@/components/charts/chartTempData";
|
||||
// import visNetwork from './visNetwork'
|
||||
export default {
|
||||
name: 'chartList',
|
||||
@@ -240,7 +242,8 @@ export default {
|
||||
detail: Object,
|
||||
from: { type: String },
|
||||
panelLock: { type: Boolean, default: false },
|
||||
hasGroup: { type: Boolean, default: true }
|
||||
hasGroup: { type: Boolean, default: true },
|
||||
panelDataList: Array
|
||||
},
|
||||
|
||||
components: {
|
||||
@@ -283,6 +286,11 @@ export default {
|
||||
// showShadow:false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
panelDataList (n) {
|
||||
this.getData(this.filter)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropmenuChange (id, show) {
|
||||
if (show) {
|
||||
@@ -662,9 +670,24 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
|
||||
this.dataList = this.panelDataList
|
||||
this.$nextTick(() => {
|
||||
this.dataList.forEach((item, index) => {
|
||||
this.$set(item, 'from', params.from)
|
||||
this.setChartSize(item, index)// 设置该图表宽度
|
||||
const chartBox = document.getElementById('chart-' + item.id)
|
||||
this.handleElementInViewport(chartBox, 0, item, index)
|
||||
if (item.type === 'group') {
|
||||
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
|
||||
}
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!param.query) delete param.query
|
||||
// 根据panelId获得panel下的所有图表
|
||||
this.$get('visual/panel/chart?panelId=' + params.panelId).then(response => {
|
||||
this.$get('visual/panel/chart?panelId=' + params.panelId + '&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
response.data.list.forEach((item, index) => {
|
||||
item.isLoaded = false
|
||||
@@ -737,7 +760,6 @@ export default {
|
||||
})
|
||||
},
|
||||
loadChartData (scrollTop) {
|
||||
console.log(scrollTop)
|
||||
if (this.dataList.length > 0) {
|
||||
this.dataList.forEach((item, index) => {
|
||||
if (!item.isLoaded) {
|
||||
@@ -918,6 +940,9 @@ export default {
|
||||
// if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
|
||||
// return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
||||
// }
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
return chartTempData
|
||||
}
|
||||
return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
|
||||
})
|
||||
// 一个图表的所有element单独获取数据
|
||||
@@ -1723,7 +1748,6 @@ export default {
|
||||
},
|
||||
// 懒加载，判断网页区域，加载可见区的prom数据
|
||||
handleElementInViewport (ele, scrollTop, item, index, isSearch) {
|
||||
console.log(ele, scrollTop, item, index)
|
||||
/*
|
||||
网页被卷去的高：document.body.scrollTop
|
||||
网页正文全文高：document.body.scrollHeight
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
980
nezha-fronted/src/components/charts/chartTempData.js
Normal file
980
nezha-fronted/src/components/charts/chartTempData.js
Normal file
@@ -0,0 +1,980 @@
|
||||
const chartTempData = {
|
||||
data: {
|
||||
result: [
|
||||
{
|
||||
metric: {
|
||||
|
||||
},
|
||||
values: [
|
||||
[
|
||||
1619326641,
|
||||
'67234.52306889734'
|
||||
],
|
||||
[
|
||||
1619326656,
|
||||
'84768.45245026101'
|
||||
],
|
||||
[
|
||||
1619326671,
|
||||
'129634.01007646995'
|
||||
],
|
||||
[
|
||||
1619326686,
|
||||
'156542.62882642742'
|
||||
],
|
||||
[
|
||||
1619326701,
|
||||
'135705.9448148899'
|
||||
],
|
||||
[
|
||||
1619326716,
|
||||
'115572.40233875904'
|
||||
],
|
||||
[
|
||||
1619326731,
|
||||
'97737.31879742522'
|
||||
],
|
||||
[
|
||||
1619326746,
|
||||
'83827.90092416394'
|
||||
],
|
||||
[
|
||||
1619326761,
|
||||
'99792.76711425022'
|
||||
],
|
||||
[
|
||||
1619326776,
|
||||
'141957.65742923907'
|
||||
],
|
||||
[
|
||||
1619326791,
|
||||
'169193.0479737079'
|
||||
],
|
||||
[
|
||||
1619326806,
|
||||
'155332.39710062867'
|
||||
],
|
||||
[
|
||||
1619326821,
|
||||
'129349.45882305052'
|
||||
],
|
||||
[
|
||||
1619326836,
|
||||
'108301.37872333173'
|
||||
],
|
||||
[
|
||||
1619326851,
|
||||
'90034.99368171557'
|
||||
],
|
||||
[
|
||||
1619326866,
|
||||
'80273.24280781174'
|
||||
],
|
||||
[
|
||||
1619326881,
|
||||
'71427.56847681744'
|
||||
],
|
||||
[
|
||||
1619326896,
|
||||
'65009.655216768355'
|
||||
],
|
||||
[
|
||||
1619326911,
|
||||
'56202.051900505874'
|
||||
],
|
||||
[
|
||||
1619326926,
|
||||
'49175.99200440523'
|
||||
],
|
||||
[
|
||||
1619326941,
|
||||
'51675.252768933875'
|
||||
],
|
||||
[
|
||||
1619326956,
|
||||
'60142.6817538732'
|
||||
],
|
||||
[
|
||||
1619326971,
|
||||
'58492.28986291914'
|
||||
],
|
||||
[
|
||||
1619326986,
|
||||
'88647.97630420537'
|
||||
],
|
||||
[
|
||||
1619327001,
|
||||
'129227.8284375646'
|
||||
],
|
||||
[
|
||||
1619327016,
|
||||
'119235.93213991504'
|
||||
],
|
||||
[
|
||||
1619327031,
|
||||
'101160.05700432547'
|
||||
],
|
||||
[
|
||||
1619327046,
|
||||
'87795.44901362302'
|
||||
],
|
||||
[
|
||||
1619327061,
|
||||
'87315.15463300308'
|
||||
],
|
||||
[
|
||||
1619327076,
|
||||
'92489.18937959624'
|
||||
],
|
||||
[
|
||||
1619327091,
|
||||
'93086.80666954032'
|
||||
],
|
||||
[
|
||||
1619327106,
|
||||
'112996.24939570608'
|
||||
],
|
||||
[
|
||||
1619327121,
|
||||
'125622.50409516145'
|
||||
],
|
||||
[
|
||||
1619327136,
|
||||
'124043.75671756931'
|
||||
],
|
||||
[
|
||||
1619327151,
|
||||
'125915.23892405373'
|
||||
],
|
||||
[
|
||||
1619327166,
|
||||
'131860.94148401526'
|
||||
],
|
||||
[
|
||||
1619327181,
|
||||
'131323.512587253'
|
||||
],
|
||||
[
|
||||
1619327196,
|
||||
'130202.84054319662'
|
||||
],
|
||||
[
|
||||
1619327211,
|
||||
'131137.2998550472'
|
||||
],
|
||||
[
|
||||
1619327226,
|
||||
'140011.84069068846'
|
||||
],
|
||||
[
|
||||
1619327241,
|
||||
'144761.03094652962'
|
||||
],
|
||||
[
|
||||
1619327256,
|
||||
'140896.2234628107'
|
||||
],
|
||||
[
|
||||
1619327271,
|
||||
'144939.9521471322'
|
||||
],
|
||||
[
|
||||
1619327286,
|
||||
'146854.00264563446'
|
||||
],
|
||||
[
|
||||
1619327301,
|
||||
'143528.7608647803'
|
||||
],
|
||||
[
|
||||
1619327316,
|
||||
'136391.16570184118'
|
||||
],
|
||||
[
|
||||
1619327331,
|
||||
'134939.63766213963'
|
||||
],
|
||||
[
|
||||
1619327346,
|
||||
'130734.90194389559'
|
||||
],
|
||||
[
|
||||
1619327361,
|
||||
'136434.88336788653'
|
||||
],
|
||||
[
|
||||
1619327376,
|
||||
'145092.16210718406'
|
||||
],
|
||||
[
|
||||
1619327391,
|
||||
'152065.04153079912'
|
||||
],
|
||||
[
|
||||
1619327406,
|
||||
'156798.09185927216'
|
||||
],
|
||||
[
|
||||
1619327421,
|
||||
'158674.77766447523'
|
||||
],
|
||||
[
|
||||
1619327436,
|
||||
'161096.58445758978'
|
||||
],
|
||||
[
|
||||
1619327451,
|
||||
'158761.11021276534'
|
||||
],
|
||||
[
|
||||
1619327466,
|
||||
'163004.29606041766'
|
||||
],
|
||||
[
|
||||
1619327481,
|
||||
'167314.9710412085'
|
||||
],
|
||||
[
|
||||
1619327496,
|
||||
'165583.65723135485'
|
||||
],
|
||||
[
|
||||
1619327511,
|
||||
'150599.88881636693'
|
||||
],
|
||||
[
|
||||
1619327526,
|
||||
'136263.16856828984'
|
||||
],
|
||||
[
|
||||
1619327541,
|
||||
'127531.12022245591'
|
||||
],
|
||||
[
|
||||
1619327556,
|
||||
'112626.2854714918'
|
||||
],
|
||||
[
|
||||
1619327571,
|
||||
'109748.6926587426'
|
||||
],
|
||||
[
|
||||
1619327586,
|
||||
'103216.89749119896'
|
||||
],
|
||||
[
|
||||
1619327601,
|
||||
'120054.0931496599'
|
||||
],
|
||||
[
|
||||
1619327616,
|
||||
'124397.01189137285'
|
||||
],
|
||||
[
|
||||
1619327631,
|
||||
'121693.36886313172'
|
||||
],
|
||||
[
|
||||
1619327646,
|
||||
'124263.5185058619'
|
||||
],
|
||||
[
|
||||
1619327661,
|
||||
'129370.31776538865'
|
||||
],
|
||||
[
|
||||
1619327676,
|
||||
'133191.73551700043'
|
||||
],
|
||||
[
|
||||
1619327691,
|
||||
'144078.4064984659'
|
||||
],
|
||||
[
|
||||
1619327706,
|
||||
'139893.47544839772'
|
||||
],
|
||||
[
|
||||
1619327721,
|
||||
'139218.28627794381'
|
||||
],
|
||||
[
|
||||
1619327736,
|
||||
'135077.997911198'
|
||||
],
|
||||
[
|
||||
1619327751,
|
||||
'137188.8500959387'
|
||||
],
|
||||
[
|
||||
1619327766,
|
||||
'136302.6625400467'
|
||||
],
|
||||
[
|
||||
1619327781,
|
||||
'135333.82845756598'
|
||||
],
|
||||
[
|
||||
1619327796,
|
||||
'141334.01284001715'
|
||||
],
|
||||
[
|
||||
1619327811,
|
||||
'137118.18506250918'
|
||||
],
|
||||
[
|
||||
1619327826,
|
||||
'131834.77580904771'
|
||||
],
|
||||
[
|
||||
1619327841,
|
||||
'125440.56107015046'
|
||||
],
|
||||
[
|
||||
1619327856,
|
||||
'129950.61479606191'
|
||||
],
|
||||
[
|
||||
1619327871,
|
||||
'132228.4300026117'
|
||||
],
|
||||
[
|
||||
1619327886,
|
||||
'126695.44097770381'
|
||||
],
|
||||
[
|
||||
1619327901,
|
||||
'140958.99289731166'
|
||||
],
|
||||
[
|
||||
1619327916,
|
||||
'145497.2801943425'
|
||||
],
|
||||
[
|
||||
1619327931,
|
||||
'132973.074348475'
|
||||
],
|
||||
[
|
||||
1619327946,
|
||||
'137179.44736553708'
|
||||
],
|
||||
[
|
||||
1619327961,
|
||||
'143180.66659914295'
|
||||
],
|
||||
[
|
||||
1619327976,
|
||||
'137765.40360422112'
|
||||
],
|
||||
[
|
||||
1619327991,
|
||||
'129042.39839074464'
|
||||
],
|
||||
[
|
||||
1619328006,
|
||||
'121699.96972642104'
|
||||
],
|
||||
[
|
||||
1619328021,
|
||||
'126221.42670726098'
|
||||
],
|
||||
[
|
||||
1619328036,
|
||||
'129724.29089390681'
|
||||
],
|
||||
[
|
||||
1619328051,
|
||||
'136616.86970395234'
|
||||
],
|
||||
[
|
||||
1619328066,
|
||||
'139008.3170592644'
|
||||
],
|
||||
[
|
||||
1619328081,
|
||||
'147551.30851143942'
|
||||
],
|
||||
[
|
||||
1619328096,
|
||||
'155084.9733920894'
|
||||
],
|
||||
[
|
||||
1619328111,
|
||||
'161961.05584908125'
|
||||
],
|
||||
[
|
||||
1619328126,
|
||||
'162768.42434900918'
|
||||
],
|
||||
[
|
||||
1619328141,
|
||||
'156259.98260298115'
|
||||
],
|
||||
[
|
||||
1619328156,
|
||||
'154439.53586441962'
|
||||
],
|
||||
[
|
||||
1619328171,
|
||||
'156135.37586396653'
|
||||
],
|
||||
[
|
||||
1619328186,
|
||||
'155884.24195870038'
|
||||
],
|
||||
[
|
||||
1619328201,
|
||||
'158386.6374126683'
|
||||
],
|
||||
[
|
||||
1619328216,
|
||||
'153855.1064273622'
|
||||
],
|
||||
[
|
||||
1619328231,
|
||||
'154296.20722794015'
|
||||
],
|
||||
[
|
||||
1619328246,
|
||||
'156068.06042940164'
|
||||
],
|
||||
[
|
||||
1619328261,
|
||||
'152266.96251924452'
|
||||
],
|
||||
[
|
||||
1619328276,
|
||||
'158288.5803709968'
|
||||
],
|
||||
[
|
||||
1619328291,
|
||||
'162867.9908155629'
|
||||
],
|
||||
[
|
||||
1619328306,
|
||||
'170007.72483388087'
|
||||
],
|
||||
[
|
||||
1619328321,
|
||||
'170739.98543400207'
|
||||
],
|
||||
[
|
||||
1619328336,
|
||||
'165015.94268824425'
|
||||
],
|
||||
[
|
||||
1619328351,
|
||||
'164295.23424811324'
|
||||
],
|
||||
[
|
||||
1619328366,
|
||||
'167809.8241459832'
|
||||
],
|
||||
[
|
||||
1619328381,
|
||||
'163713.7187657755'
|
||||
],
|
||||
[
|
||||
1619328396,
|
||||
'170231.75566899288'
|
||||
],
|
||||
[
|
||||
1619328411,
|
||||
'169801.47429921135'
|
||||
],
|
||||
[
|
||||
1619328426,
|
||||
'168025.86124235595'
|
||||
],
|
||||
[
|
||||
1619328441,
|
||||
'173188.72482130752'
|
||||
],
|
||||
[
|
||||
1619328456,
|
||||
'174727.4231324348'
|
||||
],
|
||||
[
|
||||
1619328471,
|
||||
'175981.6730451862'
|
||||
],
|
||||
[
|
||||
1619328486,
|
||||
'159560.41549215658'
|
||||
],
|
||||
[
|
||||
1619328501,
|
||||
'147907.8587575518'
|
||||
],
|
||||
[
|
||||
1619328516,
|
||||
'135063.16044782364'
|
||||
],
|
||||
[
|
||||
1619328531,
|
||||
'125265.4855367947'
|
||||
],
|
||||
[
|
||||
1619328546,
|
||||
'131484.32374593205'
|
||||
],
|
||||
[
|
||||
1619328561,
|
||||
'128506.35314877935'
|
||||
],
|
||||
[
|
||||
1619328576,
|
||||
'135645.2532736919'
|
||||
],
|
||||
[
|
||||
1619328591,
|
||||
'144056.59948014285'
|
||||
],
|
||||
[
|
||||
1619328606,
|
||||
'154336.59859408153'
|
||||
],
|
||||
[
|
||||
1619328621,
|
||||
'166894.53898574616'
|
||||
],
|
||||
[
|
||||
1619328636,
|
||||
'169942.55611799294'
|
||||
],
|
||||
[
|
||||
1619328651,
|
||||
'162718.33839203947'
|
||||
],
|
||||
[
|
||||
1619328666,
|
||||
'166353.4185642925'
|
||||
],
|
||||
[
|
||||
1619328681,
|
||||
'154666.30677592353'
|
||||
],
|
||||
[
|
||||
1619328696,
|
||||
'151539.86711566127'
|
||||
],
|
||||
[
|
||||
1619328711,
|
||||
'147111.77171292162'
|
||||
],
|
||||
[
|
||||
1619328726,
|
||||
'145664.07148119409'
|
||||
],
|
||||
[
|
||||
1619328741,
|
||||
'148277.06701275433'
|
||||
],
|
||||
[
|
||||
1619328756,
|
||||
'148253.63143962697'
|
||||
],
|
||||
[
|
||||
1619328771,
|
||||
'152678.93662904084'
|
||||
],
|
||||
[
|
||||
1619328786,
|
||||
'149142.12352995639'
|
||||
],
|
||||
[
|
||||
1619328801,
|
||||
'146774.93188005552'
|
||||
],
|
||||
[
|
||||
1619328816,
|
||||
'150737.78019044892'
|
||||
],
|
||||
[
|
||||
1619328831,
|
||||
'151467.35529243143'
|
||||
],
|
||||
[
|
||||
1619328846,
|
||||
'186328.82006624647'
|
||||
],
|
||||
[
|
||||
1619328861,
|
||||
'222879.0034326688'
|
||||
],
|
||||
[
|
||||
1619328876,
|
||||
'211274.86995717912'
|
||||
],
|
||||
[
|
||||
1619328891,
|
||||
'195136.61403361673'
|
||||
],
|
||||
[
|
||||
1619328906,
|
||||
'192917.71153120717'
|
||||
],
|
||||
[
|
||||
1619328921,
|
||||
'200290.90163374666'
|
||||
],
|
||||
[
|
||||
1619328936,
|
||||
'246708.293331658'
|
||||
],
|
||||
[
|
||||
1619328951,
|
||||
'263882.25419267954'
|
||||
],
|
||||
[
|
||||
1619328966,
|
||||
'245958.13180563593'
|
||||
],
|
||||
[
|
||||
1619328981,
|
||||
'233169.2019982923'
|
||||
],
|
||||
[
|
||||
1619328996,
|
||||
'223366.11067840818'
|
||||
],
|
||||
[
|
||||
1619329011,
|
||||
'215535.62372111296'
|
||||
],
|
||||
[
|
||||
1619329026,
|
||||
'211956.30837713985'
|
||||
],
|
||||
[
|
||||
1619329041,
|
||||
'206075.45873981708'
|
||||
],
|
||||
[
|
||||
1619329056,
|
||||
'194453.3574888578'
|
||||
],
|
||||
[
|
||||
1619329071,
|
||||
'190628.31905188566'
|
||||
],
|
||||
[
|
||||
1619329086,
|
||||
'176952.97563925944'
|
||||
],
|
||||
[
|
||||
1619329101,
|
||||
'161969.5509223355'
|
||||
],
|
||||
[
|
||||
1619329116,
|
||||
'163276.4684482879'
|
||||
],
|
||||
[
|
||||
1619329131,
|
||||
'157353.2552160069'
|
||||
],
|
||||
[
|
||||
1619329146,
|
||||
'146882.99531941232'
|
||||
],
|
||||
[
|
||||
1619329161,
|
||||
'152258.4560985092'
|
||||
],
|
||||
[
|
||||
1619329176,
|
||||
'156959.18525475552'
|
||||
],
|
||||
[
|
||||
1619329191,
|
||||
'159649.51546564006'
|
||||
],
|
||||
[
|
||||
1619329206,
|
||||
'167908.55714451114'
|
||||
],
|
||||
[
|
||||
1619329221,
|
||||
'172948.33807402014'
|
||||
],
|
||||
[
|
||||
1619329236,
|
||||
'182685.45218821947'
|
||||
],
|
||||
[
|
||||
1619329251,
|
||||
'187030.35202671902'
|
||||
],
|
||||
[
|
||||
1619329266,
|
||||
'190079.30323855148'
|
||||
],
|
||||
[
|
||||
1619329281,
|
||||
'192971.9526461216'
|
||||
],
|
||||
[
|
||||
1619329296,
|
||||
'196336.89160028717'
|
||||
],
|
||||
[
|
||||
1619329311,
|
||||
'198904.32225845434'
|
||||
],
|
||||
[
|
||||
1619329326,
|
||||
'217357.3580010716'
|
||||
],
|
||||
[
|
||||
1619329341,
|
||||
'234419.8015930916'
|
||||
],
|
||||
[
|
||||
1619329356,
|
||||
'211699.108503841'
|
||||
],
|
||||
[
|
||||
1619329371,
|
||||
'194296.97437986446'
|
||||
],
|
||||
[
|
||||
1619329386,
|
||||
'177526.51953365305'
|
||||
],
|
||||
[
|
||||
1619329401,
|
||||
'174123.3153590256'
|
||||
],
|
||||
[
|
||||
1619329416,
|
||||
'174236.0884374152'
|
||||
],
|
||||
[
|
||||
1619329431,
|
||||
'175881.42654414504'
|
||||
],
|
||||
[
|
||||
1619329446,
|
||||
'181180.89650041307'
|
||||
],
|
||||
[
|
||||
1619329461,
|
||||
'179659.1297273033'
|
||||
],
|
||||
[
|
||||
1619329476,
|
||||
'166824.4538851082'
|
||||
],
|
||||
[
|
||||
1619329491,
|
||||
'167211.34500916823'
|
||||
],
|
||||
[
|
||||
1619329506,
|
||||
'157478.16192696424'
|
||||
],
|
||||
[
|
||||
1619329521,
|
||||
'166798.5784502148'
|
||||
],
|
||||
[
|
||||
1619329536,
|
||||
'158308.49615751408'
|
||||
],
|
||||
[
|
||||
1619329551,
|
||||
'157600.86333199075'
|
||||
],
|
||||
[
|
||||
1619329566,
|
||||
'143876.78396160837'
|
||||
],
|
||||
[
|
||||
1619329581,
|
||||
'142125.21240294934'
|
||||
],
|
||||
[
|
||||
1619329596,
|
||||
'134845.72705098847'
|
||||
],
|
||||
[
|
||||
1619329611,
|
||||
'136348.216869971'
|
||||
],
|
||||
[
|
||||
1619329626,
|
||||
'128227.58563619448'
|
||||
],
|
||||
[
|
||||
1619329641,
|
||||
'127366.85129458207'
|
||||
],
|
||||
[
|
||||
1619329656,
|
||||
'144952.86329025935'
|
||||
],
|
||||
[
|
||||
1619329671,
|
||||
'146120.8645811903'
|
||||
],
|
||||
[
|
||||
1619329686,
|
||||
'138372.3693190331'
|
||||
],
|
||||
[
|
||||
1619329701,
|
||||
'137356.03166965354'
|
||||
],
|
||||
[
|
||||
1619329716,
|
||||
'135886.32810594278'
|
||||
],
|
||||
[
|
||||
1619329731,
|
||||
'137777.51698661354'
|
||||
],
|
||||
[
|
||||
1619329746,
|
||||
'139546.60952125024'
|
||||
],
|
||||
[
|
||||
1619329761,
|
||||
'143152.12746029842'
|
||||
],
|
||||
[
|
||||
1619329776,
|
||||
'132632.79505347987'
|
||||
],
|
||||
[
|
||||
1619329791,
|
||||
'132902.87719231608'
|
||||
],
|
||||
[
|
||||
1619329806,
|
||||
'121644.84048351011'
|
||||
],
|
||||
[
|
||||
1619329821,
|
||||
'127381.36242802144'
|
||||
],
|
||||
[
|
||||
1619329836,
|
||||
'133454.34768905598'
|
||||
],
|
||||
[
|
||||
1619329851,
|
||||
'118548.5648224194'
|
||||
],
|
||||
[
|
||||
1619329866,
|
||||
'103759.37104672648'
|
||||
],
|
||||
[
|
||||
1619329881,
|
||||
'92858.28975097225'
|
||||
],
|
||||
[
|
||||
1619329896,
|
||||
'79393.33731962508'
|
||||
],
|
||||
[
|
||||
1619329911,
|
||||
'68176.01390834473'
|
||||
],
|
||||
[
|
||||
1619329926,
|
||||
'83274.89339599916'
|
||||
],
|
||||
[
|
||||
1619329941,
|
||||
'105078.4121009993'
|
||||
],
|
||||
[
|
||||
1619329956,
|
||||
'121687.38734146685'
|
||||
],
|
||||
[
|
||||
1619329971,
|
||||
'173787.31134659174'
|
||||
],
|
||||
[
|
||||
1619329986,
|
||||
'218940.57387272274'
|
||||
],
|
||||
[
|
||||
1619330001,
|
||||
'252832.37563365034'
|
||||
],
|
||||
[
|
||||
1619330016,
|
||||
'250250.00475681957'
|
||||
],
|
||||
[
|
||||
1619330031,
|
||||
'222391.40952185704'
|
||||
],
|
||||
[
|
||||
1619330046,
|
||||
'201470.72138033944'
|
||||
],
|
||||
[
|
||||
1619330061,
|
||||
'188387.77045423904'
|
||||
],
|
||||
[
|
||||
1619330076,
|
||||
'173486.26445006474'
|
||||
],
|
||||
[
|
||||
1619330091,
|
||||
'176695.15924696584'
|
||||
],
|
||||
[
|
||||
1619330106,
|
||||
'161362.67228012058'
|
||||
],
|
||||
[
|
||||
1619330121,
|
||||
'156280.2942065875'
|
||||
],
|
||||
[
|
||||
1619330136,
|
||||
'147856.53518165532'
|
||||
],
|
||||
[
|
||||
1619330151,
|
||||
'142447.18670247635'
|
||||
],
|
||||
[
|
||||
1619330166,
|
||||
'147411.2790305058'
|
||||
],
|
||||
[
|
||||
1619330181,
|
||||
'154897.85213886894'
|
||||
],
|
||||
[
|
||||
1619330196,
|
||||
'165502.40762979828'
|
||||
],
|
||||
[
|
||||
1619330211,
|
||||
'186345.75300514325'
|
||||
],
|
||||
[
|
||||
1619330226,
|
||||
'225214.8040061793'
|
||||
],
|
||||
[
|
||||
1619330241,
|
||||
'212569.63634406356'
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
resultType: 'matrix'
|
||||
},
|
||||
status: 'success'
|
||||
}
|
||||
export default chartTempData
|
||||
@@ -38,7 +38,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title">
|
||||
<span class="chart-title-text">{{chartData.name}}</span>
|
||||
<span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span class="chart-title-icon" v-if="from !== 'chartTemp'" :class="{'visible':caretShow,'hidden':!caretShow}">
|
||||
<span v-if="chartData.remark">
|
||||
<el-tooltip :content="chartData.remark" placement="top" effect="light">
|
||||
<i class="nz-icon nz-icon-info-normal"></i>
|
||||
|
||||
@@ -51,6 +51,8 @@
|
||||
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
|
||||
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
||||
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||||
<!--chartTemp的Tab-->
|
||||
<panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,7 +72,7 @@ import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
|
||||
import terminalLogCMDTab from './tabs/terminalLogCMDTab'
|
||||
import operationLogTab from './tabs/operationLogTab'
|
||||
import terminalLogTab from './tabs/terminalLogTab'
|
||||
import assetTab from "@/components/common/bottomBox/tabs/assetTab";
|
||||
import assetTab from '@/components/common/bottomBox/tabs/assetTab'
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
|
||||
export default {
|
||||
@@ -120,7 +122,7 @@ export default {
|
||||
},
|
||||
module: {
|
||||
moduleTabTitle: [
|
||||
{ prop: 'endpoint', name: this.$t('asset.tableTitle.endpoint') },
|
||||
{ prop: 'endpoint', name: this.$t('asset.endpoint') },
|
||||
{ prop: 'moduleAlertMessage', name: 'Alerts' },
|
||||
{ prop: 'panel', name: 'Detail' }
|
||||
]
|
||||
@@ -132,6 +134,11 @@ export default {
|
||||
{ prop: 'endpointAlertMessage', name: 'Alerts' }
|
||||
]
|
||||
},
|
||||
chartTemp: {
|
||||
chartTempTabTitle: [
|
||||
{ prop: 'panel', name: 'Template preview' }
|
||||
]
|
||||
},
|
||||
dc: {
|
||||
cabinet: [
|
||||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<div class="sub-top-tools">
|
||||
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
||||
<div class="sub-list-tab-title">{{obj.name}}</div>
|
||||
<div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active" >{{$t("asset.tableTitle.alerts")}}</div>
|
||||
<div @click="changeTab('endpoint')" class="sub-list-tab" id="endpoint-tab-change-endpoint">{{$t("asset.modules")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active" >{{$t("asset.alerts")}}</div>
|
||||
</div>
|
||||
<div class="sub-list-tabs" v-else>
|
||||
<div class="sub-list-tab-title">
|
||||
@@ -13,8 +13,8 @@
|
||||
<template v-if="from == $CONSTANTS.fromRoute.endpoint"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
|
||||
</div><div :id="from+'-change-panelordetail'"
|
||||
@click="changeTab(from == $CONSTANTS.fromRoute.asset || from == $CONSTANTS.fromRoute.rule || from == $CONSTANTS.fromRoute.endpoint? 'panel' : 'detail')" class="sub-list-tab">{{$t("overall.detail")}}</div><div
|
||||
class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
|
||||
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.tableTitle.modules")}}</div>
|
||||
class="sub-list-tab sub-list-tab-active">{{$t("asset.alerts")}}</div><div v-if="from == $CONSTANTS.fromRoute.asset" :id="from+'-change-modules'"
|
||||
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'">{{$t("asset.modules")}}</div>
|
||||
<div @click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'" v-if="from == $CONSTANTS.fromRoute.endpoint" :id="from+'-change-endpoint'">{{$t("overall.query")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: this.$t('asset.tableTitle.cabinet'),
|
||||
name: this.$t('asset.cabinet'),
|
||||
type: 'input',
|
||||
label: 'cabinetName',
|
||||
disabled: false
|
||||
|
||||
@@ -0,0 +1,622 @@
|
||||
<template>
|
||||
<div class="full-width-height">
|
||||
<nz-bottom-data-list
|
||||
:layout="[]"
|
||||
:tabs="tabs"
|
||||
:targetTab="targetTab"
|
||||
@changeTab="changeTab"
|
||||
class="full-width-height"
|
||||
>
|
||||
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
|
||||
<template v-slot>
|
||||
<div class="panel">
|
||||
<!--图表-->
|
||||
<div class="table-list" id="tableList">
|
||||
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div class="box-content">
|
||||
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
|
||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :from="from" :panel-data="panelData" :panel-data-list="panelDataList" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</nz-bottom-data-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChartBox from '../../../page/dashboard/chartBox'
|
||||
import ChartList from '../../../charts/chart-list'
|
||||
import bus from '../../../../libs/bus'
|
||||
import subDataListMixin from '@/components/common/mixin/subDataList'
|
||||
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
|
||||
|
||||
export default {
|
||||
name: 'chartTempPreview',
|
||||
mixins: [subDataListMixin],
|
||||
props: {
|
||||
from: String,
|
||||
obj: Object,
|
||||
draggable: { type: Boolean, default: true },
|
||||
detail: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
panelLock: true,
|
||||
showTopBtn: false, // top按钮
|
||||
visible: false,
|
||||
rightBox: { // 面板弹出框相关
|
||||
show: false
|
||||
},
|
||||
tableHover: false,
|
||||
searchTime: bus.getTimezontDateRange(),
|
||||
intervalTimer: null,
|
||||
interval: 0,
|
||||
panel: { // 新增panel
|
||||
id: '',
|
||||
name: ''
|
||||
},
|
||||
chart: {},
|
||||
blankChart: {
|
||||
id: '',
|
||||
title: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
unit: 2,
|
||||
param: {
|
||||
url: '',
|
||||
threshold: ''
|
||||
},
|
||||
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
|
||||
panel: '',
|
||||
sync: 0
|
||||
},
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
|
||||
total: 0
|
||||
},
|
||||
chartsData: [], // 中间部分图表相关数据
|
||||
panelData: [],
|
||||
panelDataList: [], // chartTemp列表
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [
|
||||
]
|
||||
},
|
||||
searchLabel: {}, // 搜索参数
|
||||
// ---图表相关参数--start
|
||||
dataList: [], // 数据列表
|
||||
// searchName: '', // 搜索名称
|
||||
filter: { // 过滤条件
|
||||
// productId: 0,
|
||||
panelId: 0,
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
searchName: ''
|
||||
},
|
||||
showPanel: {
|
||||
name: '',
|
||||
type: this.from,
|
||||
id: ''
|
||||
},
|
||||
// removeModal: false, // 删除弹出
|
||||
// deleteObj: {}, // 删除对象
|
||||
// ---图表相关参数--end
|
||||
scrollbarWrap: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'chart-box': ChartBox,
|
||||
'chart-list': ChartList,
|
||||
nzBottomDataList
|
||||
},
|
||||
methods: {
|
||||
// 刷新
|
||||
refresh () {
|
||||
this.getTableData(this.obj.id)
|
||||
},
|
||||
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 () {
|
||||
this.getTableData(this.obj.id)
|
||||
},
|
||||
/* 图表相关操作--start */
|
||||
addChart () {
|
||||
this.chart = this.newChart()
|
||||
this.rightBox.show = true
|
||||
},
|
||||
newChart () {
|
||||
return JSON.parse(JSON.stringify(this.blankChart))
|
||||
},
|
||||
// 切换tab
|
||||
changeTab (tab) {
|
||||
this.$emit('changeTab', tab)
|
||||
},
|
||||
closeRightBox (refresh) {
|
||||
this.rightBox.show = false
|
||||
if (refresh) {
|
||||
this.refresh()
|
||||
}
|
||||
},
|
||||
// 编辑图表信息,打开编辑弹窗
|
||||
editChart (data) {
|
||||
if (!data.param) {
|
||||
data.param = { url: '', threshold: '' }
|
||||
}
|
||||
this.chart = JSON.parse(JSON.stringify(data))
|
||||
this.rightBox.show = true
|
||||
},
|
||||
// 移除图表:弹出确认框询问
|
||||
delChart (data, from) {
|
||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {})
|
||||
},
|
||||
delChartOk () {
|
||||
this.getData(this.filter)
|
||||
},
|
||||
// 图表创建成功，回调panel页面，进行图表的刷新
|
||||
createSuccess (msg, data, params) {
|
||||
this.getData(this.filter)
|
||||
},
|
||||
// 获取数据,用在子页面
|
||||
getData (params) {
|
||||
if (params.start_time === '' || params.end_time === '') {
|
||||
const now = bus.getTimezontDateRange()
|
||||
const endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||||
const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
|
||||
params.start_time = startTimeTmp
|
||||
params.end_time = endTimeTmp
|
||||
params.from = this.from
|
||||
}
|
||||
if (this.$refs.chartList) {
|
||||
this.$refs.chartList.initData(params)
|
||||
}
|
||||
},
|
||||
|
||||
/* 图表相关操作--end */
|
||||
/* 时间条件查询--start */
|
||||
// 选择日期变化
|
||||
dateChange (val) {
|
||||
// this.searchTime = [...val];
|
||||
const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||
this.setSearchTime(nowTimeType.type, nowTimeType.value)
|
||||
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.showPanel.id
|
||||
this.getData(this.filter)
|
||||
},
|
||||
/* 时间条件查询--end */
|
||||
setSearchTime (type, val) { // 设置searchTime
|
||||
if (type === 'minute') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'm')
|
||||
} else if (type === 'hour') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'h')
|
||||
} else if (type === 'date') {
|
||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
|
||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
|
||||
this.$set(this.searchTime, 0, startTime)
|
||||
this.$set(this.searchTime, 1, endTime)
|
||||
this.$set(this.searchTime, 2, val + 'd')
|
||||
}
|
||||
this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
|
||||
},
|
||||
// 公用操作
|
||||
getTableData (linkId) {
|
||||
if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
|
||||
this.getData(this.filter)
|
||||
} else {
|
||||
this.panelData = [this.obj]
|
||||
if (this.panelData.length > 0) {
|
||||
this.showPanel.id = this.filter.panelId = this.panelData[0].id
|
||||
this.getData(this.filter)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 定期刷新
|
||||
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(this.obj.id)
|
||||
},
|
||||
pageSize (val) {
|
||||
this.pageObj.pageSize = val
|
||||
this.getTableData(this.obj.id)
|
||||
},
|
||||
search: function () {
|
||||
if (this.$refs.chartList) {
|
||||
this.$refs.chartList.searchCharts(this.filter.searchName)
|
||||
}
|
||||
},
|
||||
// 滚动事件触发下拉加载
|
||||
onScroll () {
|
||||
const _self = this
|
||||
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
|
||||
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
|
||||
_self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
|
||||
}, 300))
|
||||
},
|
||||
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()
|
||||
},
|
||||
syncChart: function () {
|
||||
if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
|
||||
this.$confirm(this.$t('tip.syncTip'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const param = {
|
||||
modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
|
||||
assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
|
||||
}
|
||||
this.$put('/model/syncChart', param).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
|
||||
if (this.from == this.$CONSTANTS.fromRoute.asset) {
|
||||
this.refresh()
|
||||
}
|
||||
} else {
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
toTop (wrap) {
|
||||
let currentTop = wrap.scrollTop
|
||||
const interval = currentTop / 10
|
||||
const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
|
||||
if (currentTop === 0) {
|
||||
clearInterval(intervalFunc)
|
||||
} else {
|
||||
currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
|
||||
wrap.scrollTop = currentTop
|
||||
}
|
||||
}, 20)
|
||||
},
|
||||
tableListEnter () {
|
||||
this.tableHover = true
|
||||
},
|
||||
tableListLeave () {
|
||||
this.tableHover = false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.scrollbarWrap = this.$refs.dashboardScrollbar
|
||||
this.onScroll()
|
||||
document.querySelector('#tableList').addEventListener('mouseenter', this.tableListEnter)
|
||||
document.querySelector('#tableList').addEventListener('mouseleave', this.tableListLeave)
|
||||
},
|
||||
watch: {
|
||||
'filter.searchName': function (n, o) {
|
||||
const temp = this
|
||||
setTimeout(function () {
|
||||
temp.search()
|
||||
}, 1000)
|
||||
},
|
||||
obj: {
|
||||
immediate: true,
|
||||
handler (n, o) {
|
||||
setTimeout(() => {
|
||||
if (n && n.id) {
|
||||
this.getTableData(n.id)
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
|
||||
document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
|
||||
if (this.scrollbarWrap) {
|
||||
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
|
||||
};
|
||||
}
|
||||
}
|
||||
</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 .nz-icon-delete {
|
||||
color: #F98D9A;
|
||||
}
|
||||
|
||||
.content-right-option .nz-icon-delete:hover {
|
||||
color: #D96D7A;
|
||||
}
|
||||
|
||||
.content-right-option .nz-icon-view {
|
||||
color: #60BEFF;
|
||||
}
|
||||
|
||||
.content-right-option .nz-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 {
|
||||
}
|
||||
.full-width-height{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.nz-dashboard-dropdown {
|
||||
z-index: 3001 !important;
|
||||
}
|
||||
.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>
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="sub-list-tabs">
|
||||
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
||||
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.tableTitle.alerts")}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
<div class="sub-list-tabs" v-if="from===fromRoute.asset">
|
||||
<div class="sub-list-tab-title">{{obj.host}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('panel')" id="endpoint-tab-change-panel">{{$t("overall.detail")}}</div>
|
||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
|
||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
|
||||
</div>
|
||||
<div class="sub-list-tabs" v-if="from===fromRoute.module">
|
||||
<div class="sub-list-tab-title">{{obj.name}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
|
||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("asset.modules")}}</div>
|
||||
<div @click="changeTab('alertMessage')" class="sub-list-tab" id="endpoint-tab-change-alertmsg">{{$t("asset.alerts")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
<div class="top-tool-search">
|
||||
|
||||
@@ -10,14 +10,14 @@
|
||||
<template v-else-if="from == $CONSTANTS.fromRoute.endpoint">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
|
||||
</div><div class="sub-list-tab sub-list-tab-active" v-if="from == $CONSTANTS.fromRoute.model">{{$t("dashboard.panel.title")}}</div><template v-if="from == $CONSTANTS.fromRoute.asset"><div
|
||||
class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.tableTitle.alerts")}}</div><div
|
||||
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.tableTitle.modules")}}</div>
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab" v-has="'asset_alerts_view'" id="panel-tab-change-asset-alertmsg">{{$t("asset.alerts")}}</div><div
|
||||
@click="changeTab('endpoint')" class="sub-list-tab" v-has="'asset_endpoint_view'" id="panel-tab-change-endpoint">{{$t("asset.modules")}}</div>
|
||||
</template><template v-if="from == $CONSTANTS.fromRoute.rule"><div
|
||||
class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.tableTitle.alerts")}}</div>
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab" v-has="'rule_alerts_view'" id="panel-tab-change-rule-alertmsg">{{$t("asset.alerts")}}</div>
|
||||
</template><template v-if="from == $CONSTANTS.fromRoute.endpoint"><div
|
||||
class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.tableTitle.alerts")}}</div><div
|
||||
@click="changeTab('alertMessage')" class="sub-list-tab " v-has="'project_endpoint_alerts_view'">{{$t("asset.alerts")}}</div><div
|
||||
@click="changeTab('endpointQuery')" class="sub-list-tab" v-has="'project_endpoint_query_chart_view'">{{$t("overall.query")}}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
|
||||
<div class="box-content">
|
||||
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
|
||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
|
||||
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelData"></chart-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,47 +161,7 @@ export default {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$delete('panel/' + this.showPanel.id + '/charts?ids=' + data.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.deleteSuccess')
|
||||
})
|
||||
this.rightBox.show = false
|
||||
const chartList = this.$refs.chartList.dataList
|
||||
let nextChart = null; let prevChart = null
|
||||
for (let i = 0; i < chartList.length; i++) {
|
||||
if (chartList[i].id === data.id) {
|
||||
chartList.splice(i, 1)
|
||||
}
|
||||
if (data.next != -1) {
|
||||
if (chartList[i].id === data.next) {
|
||||
nextChart = chartList[i]
|
||||
}
|
||||
}
|
||||
if (data.prev != 0) {
|
||||
if (chartList[i].id === data.prev) {
|
||||
prevChart = chartList[i]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop)
|
||||
if (nextChart && prevChart) { // 删除图表为中间位置
|
||||
prevChart.next = nextChart.id
|
||||
nextChart.prev = prevChart.id
|
||||
} else {
|
||||
if (!nextChart) prevChart.next = -1
|
||||
if (!prevChart) nextChart.prev = 0
|
||||
}
|
||||
// this.getTableData(this.obj.id); //删除相关图表后，刷新面板数据
|
||||
} else {
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}).then(() => {})
|
||||
},
|
||||
delChartOk () {
|
||||
this.getData(this.filter)
|
||||
@@ -264,6 +224,15 @@ export default {
|
||||
getTableData (linkId) {
|
||||
if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
|
||||
this.getData(this.filter)
|
||||
} else {
|
||||
if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
|
||||
console.log(this.obj)
|
||||
this.panelData = [this.obj]
|
||||
console.log(this.panelData)
|
||||
if (this.panelData.length > 0) {
|
||||
this.showPanel.id = this.filter.panelId = this.panelData[0].id
|
||||
this.getData(this.filter)
|
||||
}
|
||||
} else {
|
||||
this.$get('panel', { type: this.from, link: linkId }).then(response => {
|
||||
if (response.code === 200) {
|
||||
@@ -291,6 +260,7 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 定期刷新
|
||||
selectInterval (val) {
|
||||
|
||||
@@ -230,5 +230,6 @@ export const fromRoute = {
|
||||
menus: 'menus',
|
||||
notify: 'notify',
|
||||
link: 'link',
|
||||
apiKey: 'apiKey'
|
||||
apiKey: 'apiKey',
|
||||
chartTemp: 'chartTemp'
|
||||
}
|
||||
|
||||
@@ -278,7 +278,11 @@ const cn = {
|
||||
content: '内容',
|
||||
tooltip: 'Tooltip',
|
||||
displayChart: '图表',
|
||||
aggregation: 'Aggregation'
|
||||
aggregation: 'Aggregation',
|
||||
varType: 'Vartype',
|
||||
pid: 'Chart 模板',
|
||||
selectAsset: '请选择Asset',
|
||||
selectEndpoint: '请选择Endpoint'
|
||||
},
|
||||
chartTableColumn: {
|
||||
metric: '指标',
|
||||
@@ -336,7 +340,8 @@ const cn = {
|
||||
moreTitle: '仅显示 20 个时间序列。',
|
||||
moreTitleOther: '仅显示 10 条数据。',
|
||||
showAll: '全部显示 ',
|
||||
showAllOther: '全部数据 '
|
||||
showAllOther: '全部数据 ',
|
||||
addChartTemp: 'addChartTemp'
|
||||
},
|
||||
metric: {
|
||||
name: '指标名称',
|
||||
@@ -545,6 +550,7 @@ const cn = {
|
||||
principal: '负责人',
|
||||
tel: '电话',
|
||||
featureTitle: '属性',
|
||||
endpoint: 'Endpoint',
|
||||
endpointUpNum: '代表正常的数量',
|
||||
endpointNum: '代表总的数量',
|
||||
active: '存活', // "存活",
|
||||
@@ -562,7 +568,23 @@ const cn = {
|
||||
usernamePrompt: '用户名提示',
|
||||
passwordPrompt: '密码提示',
|
||||
snmpCredential: 'SNMP凭证',
|
||||
authProtocol: '认证协议'
|
||||
authProtocol: '认证协议',
|
||||
id: 'ID',
|
||||
device: 'SN',
|
||||
assetState: '状态',
|
||||
modules: 'Endpoint',
|
||||
alerts: '告警信息',
|
||||
dataCenter: '数据中心',
|
||||
manufacturer: '厂商',
|
||||
procurementDate: '购买日期',
|
||||
principalTel: '电话',
|
||||
option: '操作',
|
||||
assetPing: 'Ping',
|
||||
lastReply: 'Ping最后应答',
|
||||
vendor: '厂商',
|
||||
name: 'Name',
|
||||
dc: '数据中心',
|
||||
type: '主机地址'
|
||||
},
|
||||
config: {
|
||||
config: '设置',
|
||||
|
||||
@@ -250,7 +250,7 @@ const en = {
|
||||
label: 'Text'
|
||||
},
|
||||
group: {
|
||||
label: 'group'
|
||||
label: 'Group'
|
||||
}
|
||||
},
|
||||
statisticsVal: {
|
||||
@@ -288,7 +288,11 @@ const en = {
|
||||
content: 'Content',
|
||||
tooltip: 'Tooltip',
|
||||
displayChart: 'Display chart',
|
||||
aggregation: 'Aggregation'
|
||||
aggregation: 'Aggregation',
|
||||
varType: 'Vartype',
|
||||
pid: 'Chart template',
|
||||
selectAsset: 'Please select the Asset',
|
||||
selectEndpoint: 'Please select the Endpoint'
|
||||
},
|
||||
chartTableColumn: {
|
||||
metric: 'Metric', // '指标'
|
||||
@@ -345,7 +349,8 @@ const en = {
|
||||
moreTitle: 'Showing only 20 time series. ',
|
||||
moreTitleOther: 'Showing only 10 the data. ',
|
||||
showAll: 'Show all ',
|
||||
showAllOther: 'All Data'
|
||||
showAllOther: 'All Data',
|
||||
addChartTemp: 'addChartTemp'
|
||||
},
|
||||
metric: {
|
||||
name: 'Metric name', // "指标名称"
|
||||
@@ -552,6 +557,7 @@ const en = {
|
||||
principal: 'Administrator', // '负责人'
|
||||
tel: 'Telephone', // '电话'
|
||||
featureTitle: 'Attribute',
|
||||
endpoint: 'Endpoint',
|
||||
endpointUpNum: 'It\'s a normal number',
|
||||
endpointNum: 'Represents the total quantity',
|
||||
active: 'Alive', // "存活",
|
||||
@@ -570,7 +576,22 @@ const en = {
|
||||
usernamePrompt: 'Username prompt',
|
||||
passwordPrompt: 'Password prompt',
|
||||
snmpCredential: 'SNMP credential',
|
||||
authProtocol: 'Auth protocol'
|
||||
authProtocol: 'Auth protocol',
|
||||
id: 'ID', // ID
|
||||
device: 'SN', // SN
|
||||
assetState: 'State', // '状态'
|
||||
assetPing: 'Ping',
|
||||
lastReply: 'Ping last reply',
|
||||
modules: 'Endpoint', // '组件'
|
||||
alerts: 'Alerts', // '告警信息'
|
||||
dataCenter: 'Data center', // DC
|
||||
vendor: 'Vendor', // '厂商'
|
||||
procurementDate: 'Purchase date', // '购买日期'
|
||||
principalTel: 'Telephone', // '电话'
|
||||
option: 'Operation', // "操作"
|
||||
name: 'Name',
|
||||
dc: 'DataCenter',
|
||||
type: 'Types',
|
||||
},
|
||||
config: {
|
||||
config: 'Settings', // "设置"
|
||||
@@ -683,7 +704,7 @@ const en = {
|
||||
},
|
||||
cabinet: {
|
||||
editCabinet: 'Edit Cabinet',
|
||||
createCabinet:'Create Cabinet',
|
||||
createCabinet: 'Create Cabinet'
|
||||
},
|
||||
model: {
|
||||
model: 'Asset model',
|
||||
@@ -757,7 +778,7 @@ const en = {
|
||||
loginUser: 'Login user',
|
||||
sourceIp: 'Source IP',
|
||||
sourceUser: 'Source user',
|
||||
SessionId:'Session ID',
|
||||
SessionId: 'Session ID'
|
||||
},
|
||||
operationlog: {
|
||||
operationlog: 'Operation log',
|
||||
@@ -1017,7 +1038,7 @@ const en = {
|
||||
expressionError: 'Please fill in the "expression" value'
|
||||
},
|
||||
chartTemp: {
|
||||
chartTemp: 'Chart template',
|
||||
chartTemp: 'Chart template'
|
||||
}
|
||||
},
|
||||
alert: {
|
||||
|
||||
@@ -20,6 +20,7 @@ export default {
|
||||
customTableTitle: [] // 自定义列工具的数据
|
||||
},
|
||||
mainTableHeight: this.$tableHeight.normal, // 主列表table高度
|
||||
searchTableHeight: this.$tableHeight.search, // 主列表table高度
|
||||
batchDeleteObjs: [],
|
||||
object: {},
|
||||
|
||||
|
||||
@@ -28,14 +28,12 @@
|
||||
width="36">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('overall.name')"
|
||||
:label="item.label"
|
||||
v-for="(item,index) in tableTitle"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.name}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('asset.host')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.manageIp}}</template>
|
||||
<template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
|
||||
<slot :name="item.prop" v-else></slot>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@@ -79,14 +77,12 @@
|
||||
width="36">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('overall.name')"
|
||||
:label="item.label"
|
||||
v-for="(item,index) in tableTitle"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.name}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('asset.host')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.host}}</template>
|
||||
<template slot-scope="scope" v-if="!item.slot">{{scope.row[item.prop]}}</template>
|
||||
<slot :name="item.prop" v-else></slot>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@@ -131,6 +127,9 @@ export default {
|
||||
},
|
||||
pageObj: {
|
||||
type: Object
|
||||
},
|
||||
tableTitle: {
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
|
||||
</button>
|
||||
<button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
|
||||
<span class="select-refresh-time" v-if="interval !== -1">{{interLabel}}</span>
|
||||
<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul v-show="dropdownShow" class="el-dropdown-menu el-popper el-dropdown-menu--mini nz-dropdown">
|
||||
@@ -85,7 +86,8 @@ export default {
|
||||
intervalTimer: null,
|
||||
interval: -1,
|
||||
unit: 2,
|
||||
dropdownShow: false
|
||||
dropdownShow: false,
|
||||
interLabel: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -96,6 +98,7 @@ export default {
|
||||
selectInterval (val) {
|
||||
this.visible = false
|
||||
this.interval = val.value
|
||||
this.interLabel = val.value
|
||||
console.info(this.interval, val)
|
||||
if (!this.showTimePicker && val && val.value != -1) {
|
||||
this.intervalTimer = setInterval(() => {
|
||||
|
||||
@@ -151,32 +151,32 @@ export default {
|
||||
mainTableHeight: '100%',
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('asset.tableTitle.host'),
|
||||
label: this.$t('asset.host'),
|
||||
prop: 'HOST',
|
||||
show: true,
|
||||
width: 130,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.tableTitle.device'),
|
||||
label: this.$t('asset.device'),
|
||||
prop: 'SN',
|
||||
show: true,
|
||||
width: 130
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.tableTitle.assetType'),
|
||||
label: this.$t('asset.assetType'),
|
||||
prop: 'assetType',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.assetState'),
|
||||
label: this.$t('asset.assetState'),
|
||||
prop: 'state',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.assetPing'),
|
||||
label: this.$t('asset.assetPing'),
|
||||
prop: 'pingStatus',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.alerts'),
|
||||
label: this.$t('asset.alerts'),
|
||||
prop: 'Alert',
|
||||
show: true,
|
||||
width: 100
|
||||
@@ -287,7 +287,7 @@ export default {
|
||||
this.esc(false)
|
||||
},
|
||||
messageStyle (e) {
|
||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
|
||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
|
||||
if (e.row.alertNum > 0) {
|
||||
return 'danger'
|
||||
} else {
|
||||
|
||||
@@ -261,7 +261,7 @@ export default {
|
||||
this.esc(false)
|
||||
},
|
||||
messageStyle (e) {
|
||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.tableTitle.alerts')) {
|
||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('asset.alerts')) {
|
||||
if (e.row.alertNum > 0) {
|
||||
return 'danger'
|
||||
} else {
|
||||
|
||||
@@ -313,7 +313,7 @@
|
||||
</button>
|
||||
|
||||
<button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
|
||||
v-has="'project_topo_save'" :disabled="prevent_opt.save"
|
||||
v-has="'topo_icon_save'" :disabled="prevent_opt.save"
|
||||
:class="{'nz-btn-disabled':prevent_opt.save}"
|
||||
style="margin-right: 20px">
|
||||
{{$t('project.topology.save')}}
|
||||
@@ -477,6 +477,8 @@ export default {
|
||||
penToolTipScale: 1,
|
||||
oldScale: 1,
|
||||
uploadPicShow: false,
|
||||
imgWidth: 0,
|
||||
imgHeight: 0,
|
||||
uploadPic: {
|
||||
name: '',
|
||||
unit: ''
|
||||
@@ -529,7 +531,7 @@ export default {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
if (n.id) {
|
||||
if (n && n.id) {
|
||||
if (getTopology(this.topologyIndex)) {
|
||||
getTopology(this.topologyIndex).destroy()
|
||||
setTopology(this.topologyIndex, null)
|
||||
@@ -1484,22 +1486,24 @@ export default {
|
||||
beforeAvatarUpload (file, fileList) {
|
||||
const this_ = this
|
||||
const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
|
||||
|
||||
const isLt2M = file.size / 1024 / 1024 < 2
|
||||
if (!isJPG) {
|
||||
this.$message.error(this_.$t('project.topology.imgFormat'))
|
||||
return false
|
||||
}
|
||||
// if (!isLt2M) {
|
||||
// this.$message.error( this_.$t('project.topology.imgSize'));
|
||||
// return false;
|
||||
// }
|
||||
if (!isLt2M) {
|
||||
this.$message.error(this_.$t('project.topology.imgSize'))
|
||||
return false
|
||||
}
|
||||
const isSize = new Promise(function (resolve, reject) {
|
||||
const width = 100
|
||||
const height = 100
|
||||
const width = 0
|
||||
const height = 0
|
||||
const _URL = window.URL || window.webkitURL
|
||||
const img = new Image()
|
||||
img.onload = function () {
|
||||
const valid = img.width > width && img.height > height
|
||||
this_.imgWidth = img.width
|
||||
this_.imgHeight = img.height
|
||||
valid ? resolve() : reject()
|
||||
}
|
||||
img.src = _URL.createObjectURL(file.raw)
|
||||
@@ -1545,12 +1549,15 @@ export default {
|
||||
upload () {
|
||||
const form = new FormData()
|
||||
form.append('file', this.file)
|
||||
console.log(this.file)
|
||||
if (this.uploadPic.name) {
|
||||
form.append('name', this.uploadPic.name)
|
||||
} else {
|
||||
form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
|
||||
}
|
||||
form.append('unit', this.uploadPic.unit)
|
||||
form.append('width', this.imgWidth)
|
||||
form.append('height', this.imgHeight)
|
||||
this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
@@ -1685,6 +1692,7 @@ export default {
|
||||
responseType: 'arraybuffer'
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res.data)
|
||||
return ('data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
|
||||
})
|
||||
.then(data => {
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
@import "./L5/css/props.css";
|
||||
</style>
|
||||
<template>
|
||||
<div class="project-box list-page" v-loading="topologyLoading">
|
||||
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
|
||||
<!--project主要信息-->
|
||||
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
|
||||
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
|
||||
<!--工具栏-->
|
||||
<span class="project-topology-tool">
|
||||
<el-dropdown trigger="click" size="small" placement="bottom-start">
|
||||
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
|
||||
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
|
||||
class="nz-icon nz-icon-arrow-down"></i></span>
|
||||
<el-dropdown-menu slot="dropdown" @click="dropdownClick">
|
||||
@@ -37,7 +37,7 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
<div class="upload-pic-box" @click="uploadPicChange">
|
||||
<div class="upload-pic-box" @click="uploadPicChange" v-has="'topo_icon_save'">
|
||||
<i class="el-icon-plus"></i>
|
||||
<span>
|
||||
Upload custom picture
|
||||
@@ -119,7 +119,7 @@
|
||||
<i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
|
||||
</button>
|
||||
<button @click="editTopology" class="top-tool-btn float-right"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
|
||||
>
|
||||
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
|
||||
</button>
|
||||
@@ -529,7 +529,7 @@ export default {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
if (n.id) {
|
||||
if (n && n.id) {
|
||||
if (getTopology(this.topologyIndex)) {
|
||||
getTopology(this.topologyIndex).destroy()
|
||||
setTopology(this.topologyIndex, null)
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
|
||||
<!-- end--标题-->
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns"></div>
|
||||
<!-- end--顶部按钮-->
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: object, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
@@ -310,50 +310,50 @@ export default {
|
||||
assetListHalf: false,
|
||||
assetTableTitle: [
|
||||
{
|
||||
label: this.$t('asset.tableTitle.name'),
|
||||
label: this.$t('asset.name'),
|
||||
prop: 'name',
|
||||
show: false,
|
||||
allowed: true,
|
||||
minWidth: '200'
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.tableTitle.sn'),
|
||||
label: this.$t('asset.sn'),
|
||||
prop: 'sn',
|
||||
show: true,
|
||||
minWidth: '200'
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.tableTitle.manageIp'),
|
||||
label: this.$t('asset.manageIp'),
|
||||
prop: 'manageIp',
|
||||
show: true,
|
||||
minWidth: '200'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.brand'),
|
||||
label: this.$t('asset.brand'),
|
||||
prop: 'brand',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.model'),
|
||||
label: this.$t('asset.model'),
|
||||
prop: 'model',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.dc'),
|
||||
label: this.$t('asset.dc'),
|
||||
prop: 'dc',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.cabinet'),
|
||||
label: this.$t('asset.cabinet'),
|
||||
prop: 'cabinet',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.type'),
|
||||
label: this.$t('asset.type'),
|
||||
prop: 'type',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
}, {
|
||||
label: this.$t('asset.tableTitle.state'),
|
||||
label: this.$t('asset.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
minWidth: '100'
|
||||
@@ -371,63 +371,63 @@ export default {
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 10,
|
||||
name: this.$t('asset.tableTitle.sn'),
|
||||
name: this.$t('asset.sn'),
|
||||
type: 'input',
|
||||
label: 'sn',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.name'),
|
||||
name: this.$t('asset.name'),
|
||||
type: 'input',
|
||||
label: 'name',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.manageIp'),
|
||||
name: this.$t('asset.manageIp'),
|
||||
type: 'input',
|
||||
label: 'manageIp',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.brand'),
|
||||
name: this.$t('asset.brand'),
|
||||
type: 'input',
|
||||
label: 'brand',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.model'),
|
||||
name: this.$t('asset.model'),
|
||||
type: 'input',
|
||||
label: 'model',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.dc'),
|
||||
name: this.$t('asset.dc'),
|
||||
type: 'input',
|
||||
label: 'dc',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.cabinet'),
|
||||
name: this.$t('asset.cabinet'),
|
||||
type: 'input',
|
||||
label: 'cabinet',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.type'),
|
||||
name: this.$t('asset.type'),
|
||||
type: 'input',
|
||||
label: 'type',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: this.$t('asset.tableTitle.state'),
|
||||
name: this.$t('asset.state'),
|
||||
type: 'input',
|
||||
label: 'state',
|
||||
disabled: false
|
||||
|
||||
@@ -193,6 +193,7 @@
|
||||
:search-msg="transfer.searchMsg"
|
||||
:table-data="transfer.tableData"
|
||||
style="margin-bottom: 20px;"
|
||||
:tableTitle="transfer.tableTitle"
|
||||
@leftToRight="addAsset"
|
||||
@rightToLeft="removeAsset">
|
||||
<template v-slot:title>Selected</template>
|
||||
@@ -302,13 +303,25 @@ export default {
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: this.$t('asset.tableTitle.cabinet'),
|
||||
name: this.$t('asset.cabinet'),
|
||||
type: 'input',
|
||||
label: 'cabinetName',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.host'),
|
||||
prop: 'host',
|
||||
show: true
|
||||
}
|
||||
],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{$t("overall.batchEndpoint")}}</div>
|
||||
<!-- end--标题-->
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns"></div>
|
||||
<!-- end--顶部按钮-->
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: endpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
|
||||
317
nezha-fronted/src/components/common/rightBox/chartTempBox.vue
Normal file
317
nezha-fronted/src/components/common/rightBox/chartTempBox.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="userForm" :model="editChartTemp" :rules="rules" class="right-box-form right-box-form-left" label-position="top" label-width="120px">
|
||||
<!--type-->
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" prop="varType">
|
||||
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.varType" value-key="chartType" id="chart-box-group" @change="varTypeChange">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
|
||||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--chartTemp list-->
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.pid')" prop="pid">
|
||||
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChartTemp.pid" value-key="chartType" id="chart-box-group" >
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">
|
||||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 选择资产，穿梭框 -->
|
||||
<div class="form__sub-title">{{editChartTemp.varType === 1 ? 'Asset' : 'Endpoint'}}</div>
|
||||
<nz-transfer ref="transfer"
|
||||
:page-obj="transfer.pageObj"
|
||||
:search-msg="transfer.searchMsg"
|
||||
:table-data="transfer.tableData"
|
||||
style="margin-bottom: 20px;"
|
||||
:tableTitle="transferTableTitle"
|
||||
@leftToRight="addAsset"
|
||||
@search="search"
|
||||
@rightToLeft="removeAsset">
|
||||
<template v-slot:title>Selected</template>
|
||||
</nz-transfer>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__footer">
|
||||
<button id="asset-edit-cancel" v-cancel="{obj: editChartTemp, func: esc}" class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nzTransfer from '@/components/common/nzTransfer'
|
||||
export default {
|
||||
name: 'chartTemp',
|
||||
components: {
|
||||
nzTransfer
|
||||
},
|
||||
props: {
|
||||
obj: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isCurrentUser () {
|
||||
return function (username) {
|
||||
return localStorage.getItem('nz-username') == username
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
editChartTemp: {},
|
||||
url: 'visual/panel/chart/fromTmpl',
|
||||
rightBox: { model: { show: false } },
|
||||
rules: { // 表单校验规则
|
||||
varType: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
pid: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
varTypeArr: [
|
||||
{ name: 'Asset', id: 1 },
|
||||
{ name: 'Endpoint', id: 2 }
|
||||
],
|
||||
chartTempArr: [],
|
||||
tableData: [],
|
||||
transfer: {
|
||||
tableData: [],
|
||||
selectedData: [],
|
||||
searchLabel: {},
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 20,
|
||||
name: 'SN',
|
||||
type: 'input',
|
||||
label: 'sn',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 21,
|
||||
name: 'Host',
|
||||
type: 'input',
|
||||
label: 'host',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 22,
|
||||
name: this.$t('asset.state'),
|
||||
type: 'select',
|
||||
label: 'assetState',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: 'pingStatus',
|
||||
type: 'select',
|
||||
label: 'pingStatus',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: this.$t('asset.cabinet'),
|
||||
type: 'input',
|
||||
label: 'cabinetName',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
pages: 1,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
transferTableTitle: [
|
||||
{
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.host'),
|
||||
prop: 'manageIp',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.editChartTemp = JSON.parse(JSON.stringify(n))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getChartTempData()
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
clickOutside () {
|
||||
this.esc(false)
|
||||
},
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
this.prevent_opt.save = false
|
||||
this.$emit('close', refresh)
|
||||
},
|
||||
save () {
|
||||
if (this.prevent_opt.save) { return } ;
|
||||
this.prevent_opt.save = true
|
||||
if (!this.transfer.selectedData.length) {
|
||||
this.prevent_opt.save = false
|
||||
if (this.editChartTemp.varType === 1) {
|
||||
this.$message.error(this.$t('dashboard.panel.chartForm.selectAsset'))
|
||||
} else {
|
||||
this.$message.error(this.$t('dashboard.panel.chartForm.selectEndpoint'))
|
||||
}
|
||||
return
|
||||
}
|
||||
this.editChartTemp.varIds = this.transfer.selectedData.map(item => item.id)
|
||||
this.$refs.userForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editChartTemp.id) {
|
||||
this.$put(this.url, this.editChartTemp).then(res => {
|
||||
this.prevent_opt.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.$emit('on-create-success')
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$post(this.url, this.editChartTemp).then(res => {
|
||||
this.prevent_opt.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.prevent_opt.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
search (searchLabel, page) {
|
||||
this.transfer.searchLabel = JSON.parse(JSON.stringify(searchLabel))
|
||||
this.transfer.pageObj = JSON.parse(JSON.stringify(page))
|
||||
this.getTableData()
|
||||
},
|
||||
addAsset (toAdd) {
|
||||
this.transfer.selectedData = toAdd
|
||||
this.transfer.tableData.forEach(d => {
|
||||
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
|
||||
})
|
||||
},
|
||||
removeAsset (toRemove) {
|
||||
this.transfer.selectedData = this.transfer.selectedData.filter(d => !toRemove.find(s => d.id === s.id))
|
||||
this.transfer.tableData.forEach(d => {
|
||||
this.$set(d, 'hide', this.transfer.selectedData.some(s => s.id === d.id))
|
||||
})
|
||||
// dc, brand, model, type
|
||||
},
|
||||
getChartTempData () {
|
||||
this.$get('visual/panel/chart', { pageSize: -1, panelId: 0, returnChildren: 0, varType: this.editChartTemp.varType }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartTempArr = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
getTableData () {
|
||||
if (this.editChartTemp.varType === 1) {
|
||||
this.getAssetData()
|
||||
} else {
|
||||
this.getEndpointData()
|
||||
}
|
||||
},
|
||||
getAssetData () {
|
||||
this.$refs.transfer.startLoading()
|
||||
this.$get('asset/asset', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
|
||||
this.$refs.transfer.endLoading()
|
||||
if (response.code === 200) {
|
||||
this.transfer.tableData = response.data.list
|
||||
this.transfer.pageObj.total = response.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
getEndpointData () {
|
||||
this.$refs.transfer.startLoading()
|
||||
this.$get('monitor/endpoint', { ...this.transfer.searchLabel, ...this.transfer.pageObj }).then(response => {
|
||||
this.$refs.transfer.endLoading()
|
||||
if (response.code === 200) {
|
||||
this.transfer.tableData = response.data.list
|
||||
this.transfer.pageObj.total = response.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
varTypeChange () {
|
||||
this.getChartTempData()
|
||||
this.editChartTemp.pid = ''
|
||||
this.transfer.selectedData = []
|
||||
this.$refs.transfer.selectedData = []
|
||||
if (this.editChartTemp.varType === 1) {
|
||||
this.transferTableTitle = [
|
||||
{
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.host'),
|
||||
prop: 'manageIp',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.transferTableTitle = [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('project.endpoint.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import '@/assets/css/common/rightBoxCommon.scss';
|
||||
</style>
|
||||
@@ -14,14 +14,9 @@
|
||||
</span>
|
||||
</div>
|
||||
<!-- end--标题-->
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns right-box-form-delete" v-if="optionType === 'edit'">
|
||||
<button v-if="editEndpoint.id" id="module-del" v-has="'monitor_endpoint_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
|
||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: editEndpoint, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
|
||||
@@ -4,14 +4,9 @@
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + " ID：" + editModule.id : $t("project.module.createModule")}}</div>
|
||||
<!-- end--标题-->
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns right-box-form-delete">
|
||||
<button v-if="editModule.id" id="module-del" v-has="'monitor_module_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
|
||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: editModule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
</div>
|
||||
|
||||
<!-- begin--表单-->
|
||||
|
||||
@@ -5,14 +5,9 @@
|
||||
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + " ID：" + editProject.id : $t("overall.createProject")}}</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns right-box-form-delete">
|
||||
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="project-del" type="button" v-has="'project_delete'" v-if="project.id">
|
||||
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
|
||||
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
</div>
|
||||
<div class="right-box-form-box right-box__container">
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="main-modal"></div>
|
||||
<div class="main-container">
|
||||
<div v-show="bottomBox.mainResizeShow" class="top-tools">
|
||||
<div class="top-tool-left" style="width: 300px">
|
||||
<div class="top-tool-left" style="min-width: 300px">
|
||||
<slot name="top-tool-left"></slot>
|
||||
</div>
|
||||
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
|
||||
|
||||
@@ -34,6 +34,9 @@
|
||||
</template>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop==='varType'">{{scope.row[item.prop]===1?'Asset':'endpoint'}}</span>
|
||||
<span v-else-if="item.prop==='type'" :class="typeIcon(scope.row)">
|
||||
{{chartTypeList.find(title=>title.id == scope.row[item.prop]).name}}
|
||||
</span>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
@@ -76,6 +79,10 @@ export default {
|
||||
label: this.$t('config.exprTemp.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.exprTemp.type'),
|
||||
prop: 'type',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.exprTemp.varType'),
|
||||
prop: 'varType',
|
||||
@@ -85,7 +92,64 @@ export default {
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
],
|
||||
chartTypeList: [
|
||||
{
|
||||
id: 'line',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
|
||||
},
|
||||
{
|
||||
id: 'stackArea',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
|
||||
},
|
||||
{
|
||||
id: 'bar',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
|
||||
},
|
||||
{
|
||||
id: 'singleStat',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
|
||||
},
|
||||
{
|
||||
id: 'pie',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
|
||||
},
|
||||
{
|
||||
id: 'table',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
|
||||
},
|
||||
{
|
||||
id: 'alertList',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
|
||||
},
|
||||
{
|
||||
id: 'text',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
|
||||
},
|
||||
{
|
||||
id: 'url',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
|
||||
},
|
||||
{
|
||||
id: 'group',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
|
||||
}
|
||||
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
typeIcon (row) {
|
||||
let str = 'nz-icon'
|
||||
switch (row.type) {
|
||||
case 'line':
|
||||
str += 'nz-icon-multitext'
|
||||
break
|
||||
default :
|
||||
str += 'nz-icon-multitext'
|
||||
break
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,22 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'state'">
|
||||
{{scope.row[item.prop]}}
|
||||
<el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">
|
||||
<div>
|
||||
<div v-html="suspendedStr(scope.row[item.prop])"></div>
|
||||
</div>
|
||||
<div slot="reference" style="width: 100px">
|
||||
<div v-if="scope.row[item.prop]===0">
|
||||
<div class="active-icon red inline-block"></div> down
|
||||
</div>
|
||||
<div v-else-if="scope.row[item.prop]===1">
|
||||
<div class="active-icon green inline-block"></div> up
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="active-icon gray inline-block"></div> suspended
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
|
||||
</template>
|
||||
@@ -157,6 +172,29 @@ export default {
|
||||
const creatDom = document.getElementById('creatDom')
|
||||
creatDom.parentNode.removeChild(creatDom)
|
||||
this.$message.success(this.$t('overall.copySuccess'))
|
||||
},
|
||||
suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
|
||||
const arr = status.toString(2).split('')
|
||||
while (arr.length < 5) {
|
||||
arr.unshift('0')
|
||||
}
|
||||
arr.pop()
|
||||
let str = ''
|
||||
arr.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
str += `<div>DC <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
|
||||
}
|
||||
if (index === 1) {
|
||||
str += `<div>ASSET <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
|
||||
}
|
||||
if (index === 2) {
|
||||
str += `<div>ENDPOINT <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
|
||||
}
|
||||
if (index === 3) {
|
||||
str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red' : 'green'}"></div></div>`
|
||||
}
|
||||
})
|
||||
return str
|
||||
}
|
||||
},
|
||||
computed: {}
|
||||
@@ -190,6 +228,9 @@ export default {
|
||||
.endpoint-num, .alert-num{
|
||||
cursor: pointer;
|
||||
}
|
||||
.inline-block{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.endpointConfigsTips{
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'endpointNum'">
|
||||
<span class="endpoint-num" @click="showBottomBox('endpoint', scope.row)">
|
||||
<i class="nz-icon nz-icon-endpoint" :class="scope.row[item.prop]>0?'colorEF7458':'colorEF7458'"/>
|
||||
<i class="nz-icon nz-icon-overview-endpoint color969dea"/>
|
||||
{{scope.row[item.prop]}}
|
||||
</span>
|
||||
</template>
|
||||
@@ -146,6 +146,9 @@ export default {
|
||||
.color23BF9A{
|
||||
color: #23BF9A;
|
||||
}
|
||||
.color969dea{
|
||||
color: #969dea;
|
||||
}
|
||||
.endpoint-num, .alert-num{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -169,11 +169,14 @@ export default {
|
||||
}
|
||||
},
|
||||
getPanelData () { // 获取panel数据
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.panelData = response.data.list
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handlerTableData (results) {
|
||||
const tableData = []
|
||||
@@ -462,6 +465,7 @@ export default {
|
||||
this.graphShow = false
|
||||
},
|
||||
saveChart () { // 新增chart
|
||||
this.getPanelData().then(()=>{
|
||||
const chart = {
|
||||
title: '',
|
||||
type: 'line',
|
||||
@@ -483,6 +487,7 @@ export default {
|
||||
}
|
||||
this.chart = chart
|
||||
this.rightBox.show = true
|
||||
})
|
||||
},
|
||||
createSuccess (type, response, param, panel) {
|
||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
||||
@@ -505,7 +510,7 @@ export default {
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
this.getPanelData()
|
||||
// this.getPanelData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -170,7 +170,7 @@ export default {
|
||||
disabled: false
|
||||
}, {
|
||||
id: 23,
|
||||
name: this.$t('asset.tableTitle.cabinet'),
|
||||
name: this.$t('asset.cabinet'),
|
||||
type: 'input',
|
||||
label: 'cabinetName',
|
||||
disabled: false
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
:api="url"
|
||||
:layout="['searchInput', 'elementSet']"
|
||||
:custom-table-title.sync="tools.customTableTitle"
|
||||
:from="fromRoute.expressionTemplate"
|
||||
:from="fromRoute.chartTemp"
|
||||
:search-msg="searchMsg">
|
||||
<template v-slot:top-tool-left>
|
||||
<div id="module-type-1" class="nz-tab-item-box" @click="clickTab([],'exprTemp')"><!--v-has="'snmp_browser_view'"-->
|
||||
@@ -142,6 +142,15 @@ export default {
|
||||
this.object.panelName = 'template'
|
||||
this.rightBox.show = true
|
||||
},
|
||||
edit (u) {
|
||||
if (!u.param) {
|
||||
u.param = { url: '', threshold: '' }
|
||||
}
|
||||
this.object = JSON.parse(JSON.stringify(u))
|
||||
this.object.panelId = this.showPanel.id
|
||||
this.object.panelName = this.showPanel.name
|
||||
this.rightBox.show = true
|
||||
},
|
||||
getTableData (params) {
|
||||
if (params && Object.keys(params).length > 0) {
|
||||
for (const key in params) {
|
||||
@@ -156,6 +165,9 @@ export default {
|
||||
if (response.code === 200) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
response.data.list[i].status = response.data.list[i].status + ''
|
||||
if (response.data.list[i].type === 'group') {
|
||||
response.data.list[i].children = []
|
||||
}
|
||||
}
|
||||
this.tableData = response.data.list
|
||||
this.pageObj.total = response.data.total
|
||||
|
||||
@@ -642,7 +642,7 @@ export default {
|
||||
this.panelName = panel.name
|
||||
this.panelId = panel.id
|
||||
this.editChart.groupId = ''
|
||||
this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
|
||||
this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.groupArr = []
|
||||
response.data.list.forEach((item, index) => {
|
||||
@@ -1784,7 +1784,7 @@ export default {
|
||||
if (this.showPanel.id || this.from === 'temp') {
|
||||
this.panelId = this.showPanel.id
|
||||
}
|
||||
this.$get('visual/panel/chart?panelId=' + this.panelId).then(response => {
|
||||
this.$get('visual/panel/chart?panelId=' + this.panelId + '&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.groupArr = []
|
||||
response.data.list.forEach((item, index) => {
|
||||
|
||||
@@ -91,6 +91,7 @@
|
||||
</button>
|
||||
</template>
|
||||
</export-excel>
|
||||
<button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
|
||||
<button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -107,6 +108,9 @@
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
|
||||
</transition>
|
||||
<transition name="right-box">
|
||||
<chart-temp-box :obj="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartTempBox" @on-create-success="createSuccess" v-if="rightBox.chartTemp.show"></chart-temp-box>
|
||||
</transition>
|
||||
<transition name="right-box">
|
||||
<panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
|
||||
</transition>
|
||||
@@ -121,6 +125,7 @@ import pickTime from '../../common/pickTime'
|
||||
import exportXLSX from '../../common/exportXLSX'
|
||||
import selectPanel from '../../common/popBox/selectPanel'
|
||||
import panelBox from '@/components/common/rightBox/panelBox'
|
||||
import chartTempBox from '@/components/common/rightBox/chartTempBox'
|
||||
|
||||
export default {
|
||||
name: 'panel',
|
||||
@@ -131,6 +136,7 @@ export default {
|
||||
visible: false,
|
||||
rightBox: { // 面板弹出框相关
|
||||
chart: { show: false },
|
||||
chartTemp: { show: false },
|
||||
panel: { show: false }
|
||||
},
|
||||
tableHover: false,
|
||||
@@ -166,6 +172,12 @@ export default {
|
||||
pageSize: -1, // 此处获取所有数据，所以设置一个较大的值
|
||||
total: 0
|
||||
},
|
||||
blankChartTemp: {
|
||||
varType: 1,
|
||||
pid: '',
|
||||
panelId: '',
|
||||
varIds: []
|
||||
},
|
||||
chartsData: [], // 中间部分图表相关数据
|
||||
panelData: [],
|
||||
panelDataDragTmp: [],
|
||||
@@ -204,7 +216,8 @@ export default {
|
||||
'pick-time': pickTime,
|
||||
'export-excel': exportXLSX,
|
||||
selectPanel,
|
||||
'panel-box': panelBox
|
||||
'panel-box': panelBox,
|
||||
chartTempBox
|
||||
},
|
||||
methods: {
|
||||
// 刷新
|
||||
@@ -290,6 +303,11 @@ export default {
|
||||
this.chart.panelName = this.showPanel.name
|
||||
this.rightBox.chart.show = true
|
||||
},
|
||||
addChartByTemp () {
|
||||
this.chart = Object.assign({},this.blankChartTemp)
|
||||
this.chart.panelId = this.showPanel.id
|
||||
this.rightBox.chartTemp.show = true
|
||||
},
|
||||
addGroupItem (groupId) {
|
||||
this.chart = this.newChart()
|
||||
this.chart.groupId = groupId
|
||||
@@ -317,6 +335,12 @@ export default {
|
||||
|
||||
} */
|
||||
},
|
||||
closeChartTempBox () {
|
||||
this.rightBox.chartTemp.show = false
|
||||
/* if (refresh) {
|
||||
|
||||
} */
|
||||
},
|
||||
closePanelBox (refresh) {
|
||||
this.rightBox.panel.show = false
|
||||
/* if (refresh) {
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
:from="fromRoute.endpoint"
|
||||
:layout="['searchInput', 'elementSet']"
|
||||
:hasSearch="true"
|
||||
@search="search"
|
||||
:search-msg="searchMsg">
|
||||
<template v-slot:top-tool-right>
|
||||
<export-excel
|
||||
@@ -44,7 +45,7 @@
|
||||
v-loading="slotProps.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:height="searchTableHeight"
|
||||
:table-data="tableData"
|
||||
:tableId="tableId"
|
||||
@del="del"
|
||||
@@ -126,6 +127,26 @@ export default {
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 14,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'query',
|
||||
label: 'query',
|
||||
disabled: false
|
||||
},{
|
||||
id: 34,
|
||||
name: this.$t('project.project.project'),
|
||||
// name: this.$t('asset.asset'),
|
||||
type: 'input',
|
||||
label: 'projectName',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 35,
|
||||
name: this.$t('project.module.module'),
|
||||
// name: this.$t('asset.asset'),
|
||||
type: 'input',
|
||||
label: 'moduleName',
|
||||
disabled: false
|
||||
}]
|
||||
},
|
||||
roles: [],
|
||||
@@ -222,17 +243,23 @@ export default {
|
||||
getTableData () {
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
const params = {
|
||||
...this.searchLabel,
|
||||
...this.searchCheckBox
|
||||
}
|
||||
if (this.searchLabel.projectIds) {
|
||||
localStorage.setItem('endpointProjectId', this.searchLabel.projectIds)
|
||||
if (params.projectIds) {
|
||||
params.projectIds += ',' + this.searchLabel.projectIds
|
||||
} else {
|
||||
params.projectIds = this.searchLabel.projectIds
|
||||
}
|
||||
} else {
|
||||
localStorage.removeItem('endpointProjectId')
|
||||
}
|
||||
const params = {
|
||||
...this.searchLabel,
|
||||
...this.titleSearch
|
||||
}
|
||||
console.log()
|
||||
this.tools.loading = true
|
||||
this.$get(this.url, { ...params, ...this.searchCheckBox }).then(response => {
|
||||
this.$get(this.url, params).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code === 200) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
|
||||
@@ -58,17 +58,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import exportXLSX from '@/components/common/exportXLSX'
|
||||
import bus from '@/libs/bus'
|
||||
import topologyL5 from '@/components/common/project/topologyL5'
|
||||
import deleteButton from '@/components/common/deleteButton'
|
||||
|
||||
export default {
|
||||
name: 'project2',
|
||||
components: {
|
||||
topologyL5,
|
||||
'export-excel': exportXLSX,
|
||||
'delete-button': deleteButton
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -624,7 +620,6 @@ export default {
|
||||
this.endpointPageObj.pageSize = pageSize
|
||||
}
|
||||
this.getUserData()
|
||||
this.getProjectList()
|
||||
},
|
||||
mounted () {
|
||||
// 初始化表头
|
||||
|
||||
@@ -89,10 +89,49 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTableData (params) {
|
||||
if (params && Object.keys(params).length > 0) {
|
||||
for (const key in params) {
|
||||
this.$set(this.searchLabel, key, params[key])
|
||||
}
|
||||
}
|
||||
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
|
||||
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
|
||||
this.tools.loading = true
|
||||
this.$get(this.url, { ...this.searchLabel, ...this.searchCheckBox }).then(response => {
|
||||
this.tools.loading = false
|
||||
if (response.code === 200) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
response.data.list[i].status = response.data.list[i].status + ''
|
||||
}
|
||||
if (!this.$store.state.currentProject.id) {
|
||||
this.$store.commit('currentProjectChange', response.data.list[0])
|
||||
}
|
||||
this.tableData = response.data.list
|
||||
this.pageObj.total = response.data.total
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.dataTable.$refs.dataTable.bodyWrapper
|
||||
this.toTopBtnHandler(this.scrollbarWrap)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
created () {
|
||||
console.log(this.$store.state.currentProject)
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
destroyed () {
|
||||
this.$store.commit('currentProjectChange', {
|
||||
id: '',
|
||||
name: '',
|
||||
remark: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -28,7 +28,7 @@ export function get (url, params) {
|
||||
axios.get(url, {
|
||||
params: params
|
||||
}).then(response => {
|
||||
resolve(response.data)
|
||||
resolve(response.data, response)
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
resolve(err.response.data)
|
||||
@@ -42,7 +42,7 @@ export function get (url, params) {
|
||||
export function post (url, params, headers) {
|
||||
return new Promise(resolve => {
|
||||
axios.post(url, params, { headers: headers }).then(response => {
|
||||
resolve(response.data)
|
||||
resolve(response.data, response)
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
resolve(err.response.data)
|
||||
@@ -56,7 +56,7 @@ export function post (url, params, headers) {
|
||||
export function put (url, params, headers) {
|
||||
return new Promise((resolve) => {
|
||||
axios.put(url, params, { headers: headers }).then(response => {
|
||||
resolve(response.data)
|
||||
resolve(response.data, response)
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
resolve(err.response.data)
|
||||
@@ -70,7 +70,7 @@ export function put (url, params, headers) {
|
||||
export function del (url, params) {
|
||||
return new Promise((resolve) => {
|
||||
axios.delete(url, params).then(response => {
|
||||
resolve(response.data)
|
||||
resolve(response.data, response)
|
||||
}).catch(err => {
|
||||
if (err.response) {
|
||||
resolve(err.response.data)
|
||||
|
||||
@@ -55,6 +55,7 @@ Vue.prototype.$chartResizeTool = chartResizeTool
|
||||
Vue.prototype.$tableSet = tableSet
|
||||
Vue.prototype.$tableHeight = { // 列表页表格的高度
|
||||
normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
|
||||
search: 'calc(100% - 240px)', // 常规高度，特例在下方定义
|
||||
openSubList: { // 打开二级列表后的高度
|
||||
mainList: 'calc(100% - 60px)',
|
||||
subList: 'calc(100% - 38px)',
|
||||
|
||||
Reference in New Issue
Block a user