feat：修改 panel页面 pageSize未传的问题 以及chartTemp的预览
This commit is contained in:
zhangyu
@@ -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{
|
||||
|
||||
@@ -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,12 @@ export default {
|
||||
// showShadow:false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
panelDataList (n) {
|
||||
console.log(n)
|
||||
this.getData(this.filter)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dropmenuChange (id, show) {
|
||||
if (show) {
|
||||
@@ -662,9 +671,25 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
|
||||
console.log(this.panelDataList)
|
||||
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
|
||||
@@ -918,6 +943,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单独获取数据
|
||||
|
||||
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
|
||||
@@ -49,6 +49,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>
|
||||
@@ -127,6 +129,11 @@ export default {
|
||||
{ prop: 'endpointQuery', name: 'Query' },
|
||||
{ prop: 'endpointAlertMessage', name: 'Alerts' }
|
||||
]
|
||||
},
|
||||
chartTemp: {
|
||||
chartTempTabTitle: [
|
||||
{ prop: 'panel', name: 'Template preview' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
@@ -265,31 +225,41 @@ export default {
|
||||
if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
|
||||
this.getData(this.filter)
|
||||
} else {
|
||||
this.$get('panel', { type: this.from, link: linkId }).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.panelData = response.data.list
|
||||
if (this.panelData.length > 0) {
|
||||
this.showPanel.id = this.filter.panelId = this.panelData[0].id
|
||||
this.getData(this.filter)
|
||||
}
|
||||
} else {
|
||||
if (response.msg) {
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
console.error(response.error)
|
||||
this.$message.error(response.error)
|
||||
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) {
|
||||
this.panelData = response.data.list
|
||||
if (this.panelData.length > 0) {
|
||||
this.showPanel.id = this.filter.panelId = this.panelData[0].id
|
||||
this.getData(this.filter)
|
||||
}
|
||||
} else {
|
||||
console.error(response)
|
||||
this.$message.error(response)
|
||||
if (response.msg) {
|
||||
console.error(response.msg)
|
||||
this.$message.error(response.msg)
|
||||
} else if (response.error) {
|
||||
console.error(response.error)
|
||||
this.$message.error(response.error)
|
||||
} else {
|
||||
console.error(response)
|
||||
this.$message.error(response)
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
this.$message.error(error.toString())
|
||||
}
|
||||
})
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
console.error(error)
|
||||
this.$message.error(error.toString())
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 定期刷新
|
||||
|
||||
@@ -232,5 +232,6 @@ export const fromRoute = {
|
||||
menus: 'menus',
|
||||
notify: 'notify',
|
||||
link: 'link',
|
||||
apiKey: 'apiKey'
|
||||
apiKey: 'apiKey',
|
||||
chartTemp: 'chartTemp'
|
||||
}
|
||||
|
||||
@@ -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--表单-->
|
||||
|
||||
@@ -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--表单-->
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
</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="'asd'">{{scope.row[item.prop]}}</span>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
@@ -76,6 +77,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',
|
||||
|
||||
@@ -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'"-->
|
||||
@@ -156,6 +156,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) => {
|
||||
|
||||
@@ -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 () {
|
||||
// 初始化表头
|
||||
|
||||
Reference in New Issue
Block a user