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

temp: 临时提交回家做；修复了些bug，下次说明

Browse Source
This commit is contained in:
chenjinsong
2020-06-17 19:52:03 +08:00
parent 4586d11310
commit 8c439ece91
10 changed files with 164 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -705,7 +705,6 @@ export default {
}else{ }else{
chart=Object.assign({},this.chartInfo) chart=Object.assign({},this.chartInfo)
} }
console.info(chart)
if(chart && chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度 if(chart && chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
let param=chart.param; let param=chart.param;
if(param.endpointId&&param.endpointId != ''){ if(param.endpointId&&param.endpointId != ''){
@@ -730,7 +729,6 @@ export default {
queryParam.state=param.state; queryParam.state=param.state;
} }
} }
console.info(queryParam)
this.startLoading(filterType); this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => { this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) { if (response.code == 200) {

90
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -35,7 +35,7 @@
<!-- endpoint-detail、asset、model的assetInfo的asset详情--> <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]"> <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{assetKey[key]}}</span> <span class="content-text">{{assetKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
</div> </div>
@@ -46,13 +46,16 @@
<div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div> <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
<span>{{value ? value + 'ms' : ''}}</span> <span>{{value ? value + 'ms' : ''}}</span>
</template> </template>
<span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span> <template v-else-if="assetKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div> </div>
</div> </div>
<!-- endpoint-detail、asset、model的assetInfo的feature--> <!-- endpoint-detail、asset、model的assetInfo的feature-->
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'"> <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span> <span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div> </div>
@@ -83,14 +86,17 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</template> </template>
<span v-else-if="key">{{value ? value : "&nbsp;"}}</span> <template v-else-if="key">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div> </div>
</div> </div>
<!-- project的projectInfo的project详情--> <!-- project的projectInfo的project详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]"> <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{projectKey[key]}}</span> <span class="content-text">{{projectKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
@@ -102,13 +108,16 @@
<div class="active-icon orange"></div> <div class="active-icon orange"></div>
<span>{{value[2]}}</span> <span>{{value[2]}}</span>
</template> </template>
<span v-else-if="projectKey[key]">{{value ? value : "&nbsp;"}}</span> <template v-else-if="projectKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div> </div>
</div> </div>
<!-- project的projectInfo的module详情--> <!-- project的projectInfo的module详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]"> <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{moduleKey[key]}}</span> <span class="content-text">{{moduleKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
@@ -126,40 +135,48 @@
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle"> <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp; <span>{{value[1]}}</span>&nbsp;&nbsp;
</template> </template>
<span v-else-if="moduleKey[key]">{{value ? value : "&nbsp;"}}</span> <template v-else-if="moduleKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div> </div>
</div> </div>
<!-- endpoint-detail的endpointInfo的endpoint详情--> <!-- endpoint-detail的endpointInfo的endpoint详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]"> <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{endpointKey[key]}}</span> <span class="content-text">{{endpointKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template> <template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
<span v-else-if="endpointKey[key]">{{value ? value : "&nbsp;"}}</span> <template v-else-if="endpointKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div> </div>
</div> </div>
<!-- endpoint-detail的endpointInfo的alert详情--> <!-- endpoint-detail的endpointInfo的alert详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')"> <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span> <span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span>{{value ? value : "&nbsp;"}}</span> <span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div> </div>
</div> </div>
<!-- alertRule-detail的详情--> <!-- alertRule-detail的详情-->
<div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'"> <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span> <span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span>{{value ? value : "&nbsp;"}}</span> <span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div> </div>
</div> </div>
</template> </template>
@@ -202,6 +219,15 @@
default: 0, default: 0,
} }
}, },
watch: {
data: {
deep: true,
immediate: true,
handler(n) {
console.info(n)
}
}
},
data() { data() {
return { return {
ready: false, ready: false,
@@ -273,25 +299,26 @@
}, },
}; };
}, },
methods: { computed: {
itemTip(type, content, index, ready) { itemTip() {
let className = ""; return function(type, content, index, ready) {
this.$nextTick(() => { let className = "item-tip-show";
if (ready) { this.$nextTick(() => {
let cellDom = document.querySelector(`#${type}-${index}`); if (ready) {
let spanDom = document.createElement("span"); let cellDom = document.querySelector(`#${type}-${index}`);
spanDom.style.display = "inline-block"; let spanDom = document.querySelector(`#${type}-${index} .content-text`);
spanDom.innerText = content; if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
cellDom.appendChild(spanDom); document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className);
if (cellDom.offsetWidth-16 < spanDom.offsetWidth) { } else {
className = "item-tip-show"; document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className);
}
} }
cellDom.removeChild(spanDom); });
return className; return "";
} }
});
return className;
}, },
},
methods: {
startResize(e) { startResize(e) {
let vm = this; let vm = this;
this.$chartResizeTool.start(vm, this.data, e); this.$chartResizeTool.start(vm, this.data, e);
@@ -368,7 +395,6 @@
// 设置数据, filter区分 // 设置数据, filter区分
setData(chartItem, detail, panelId, filter, area, errorMsg) { setData(chartItem, detail, panelId, filter, area, errorMsg) {
//this.resize(chartItem); //this.resize(chartItem);
console.info(chartItem, detail)
if(errorMsg && errorMsg !== ''){ if(errorMsg && errorMsg !== ''){
this.isError = true; this.isError = true;
this.errorContent = errorMsg; this.errorContent = errorMsg;

9
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -494,6 +494,7 @@
} }
}, },
// 获取panel详情数据,获取panel下所有chart列表 // 获取panel详情数据,获取panel下所有chart列表
getData(params) { getData(params) {
const param = { const param = {
panelId: params.panelId, panelId: params.panelId,
@@ -526,6 +527,7 @@
type: "line", type: "line",
prev: -10, prev: -10,
next: -1, next: -1,
unit: 1,
buildIn: 1, buildIn: 1,
elements: [{ elements: [{
id: '', id: '',
@@ -533,6 +535,8 @@
type: '' type: ''
}] }]
}); });
this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-24*60*60*1000, "yyyy-MM-dd hh:mm:ss"));
this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
this.$nextTick(() => { this.$nextTick(() => {
this.dataList.forEach((item,index) => { this.dataList.forEach((item,index) => {
this.$set(item, "from", params.from); this.$set(item, "from", params.from);
@@ -741,6 +745,10 @@
const chartItem = chartInfo; const chartItem = chartInfo;
const index = pos; // 指标 const index = pos; // 指标
if(chartItem.type === 'assetInfo'){ if(chartItem.type === 'assetInfo'){
if (chartItem.from != 'endpoint') {
this.$set(chartItem, "draggable", true);
this.$set(chartItem, "resizable", true);
}
this.getAssetInfoChartData(chartItem); this.getAssetInfoChartData(chartItem);
return; return;
} }
@@ -1225,7 +1233,6 @@
}); });
}); });
alertMsg.then(result => { alertMsg.then(result => {
console.info(detail);
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail); this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
}, err => { }, err => {

44
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -229,7 +229,7 @@
if(chartType==='table'){ if(chartType==='table'){
this.tableShow = false; this.tableShow = false;
chartContainerId = 'chartTablePreview'; chartContainerId = 'chartTablePreview';
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") { }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
this.isGreyScreen=[]; this.isGreyScreen=[];
this.showLegend = false; this.showLegend = false;
chartContainerId = 'chartEchartPreview'; chartContainerId = 'chartEchartPreview';
@@ -422,11 +422,14 @@
}, },
metric_name: '', metric_name: '',
}; };
if (chartItem.type === 'stackArea' || chartItem.type === "endpointInfo") { if (chartItem.type === 'stackArea') {
seriesItem.theData.type = 'line'; seriesItem.theData.type = 'line';
seriesItem.theData.stack = chartItem.title; seriesItem.theData.stack = chartItem.title;
seriesItem.theData.areaStyle = {"opacity": 0.3}; seriesItem.theData.areaStyle = {"opacity": 0.3};
} }
if (chartItem.type === "endpointInfo") {
seriesItem.theData.type = 'line';
}
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
let host = '';//up, let host = '';//up,
if (queryItem.metric.__name__) { if (queryItem.metric.__name__) {
@@ -475,7 +478,6 @@
return [dpsItem[0] * 1000, dpsItem[1]]; return [dpsItem[0] * 1000, dpsItem[1]];
}); });
series.push(seriesItem.theData); series.push(seriesItem.theData);
console.info(seriesItem.theData)
} else if (chartItem.elements && chartItem.elements[innerPos]) { } else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示 // 无数据提示
@@ -506,7 +508,7 @@
//if(this.$refs.editChart&&this.$refs.editChart[index]) { //if(this.$refs.editChart&&this.$refs.editChart[index]) {
if (chartItem.type === 'table') {//表格 if (chartItem.type === 'table') {//表格
this.setTableData(tableData); this.setTableData(tableData);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == "endpointInfo") { } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == "endpoint") {
if (series.length && chartItem.type === 4) {//曲线汇总 if (series.length && chartItem.type === 4) {//曲线汇总
} }
if(series.length<1){ if(series.length<1){
@@ -515,7 +517,7 @@
this.noData=false; this.noData=false;
} }
let _chartItem = JSON.parse(JSON.stringify(chartItem)); let _chartItem = JSON.parse(JSON.stringify(chartItem));
if (chartItem.type == "endpointInfo") { if (chartItem.from == "endpoint") {
_chartItem.type = "line"; _chartItem.type = "line";
} }
this.setData(_chartItem, series, legend); this.setData(_chartItem, series, legend);
@@ -745,7 +747,12 @@
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`; str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`; str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`; str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); str += function(){
if (chartInfo.from == 'endpoint') {
return val == 1 ? "up" : "down";
}
return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
}();
str += `</div>`; str += `</div>`;
str += `</div>`; str += `</div>`;
@@ -878,6 +885,7 @@
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
minInterval: 1,
splitLine:{ splitLine:{
show:true show:true
}, },
@@ -891,6 +899,13 @@
//去掉y轴--end //去掉y轴--end
axisLabel: { axisLabel: {
formatter: function(value,index){ formatter: function(value,index){
if (self.chart.from == 'endpoint') {
if (value == 1) {
return "up";
} else {
return "down";
}
}
let chartUnit=chartInfo.unit; let chartUnit=chartInfo.unit;
chartUnit=chartUnit?chartUnit:2; chartUnit=chartUnit?chartUnit:2;
let unit=chartDataFormat.getUnit(chartUnit); let unit=chartDataFormat.getUnit(chartUnit);
@@ -902,7 +917,6 @@
useUTC: false,//使用本地时间 useUTC: false,//使用本地时间
series: dataArg series: dataArg
}; };
if(this.echartModalStore){ if(this.echartModalStore){
this.echartModalStore.clear(); this.echartModalStore.clear();
} }
@@ -912,12 +926,12 @@
if(legend){ if(legend){
this.screenLegendList = []; this.screenLegendList = [];
legend.forEach((item, i) => { legend.forEach((item, i) => {
const legend = { let _legend = {
name:item.name, name:item.name,
alias:item.alias, alias:item.alias,
showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name) showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
}; };
this.screenLegendList.push(legend); this.screenLegendList.push(_legend);
this.isGreyScreen.push(false); this.isGreyScreen.push(false);
}); });
} }
@@ -1080,9 +1094,11 @@
this.tableShow = false; this.tableShow = false;
this.$refs.loadingPreview.startLoading(); this.$refs.loadingPreview.startLoading();
this.getChartData(); this.getChartData();
} else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) { } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || this.chart.from == 'endpoint') {
this.echartModalStore.clear(); this.echartModalStore.clear();
this.showLegend = false; if (this.chart.from != 'endpoint') {
this.showLegend = false;
}
this.$refs.loadingPreview.startLoading(); this.$refs.loadingPreview.startLoading();
this.getQueryChart(); this.getQueryChart();
}else if (chartType === 'singleStat') { }else if (chartType === 'singleStat') {
@@ -1111,7 +1127,7 @@
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step); return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
}); });
// 一个图表 // 一个图表
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then(res => {
if (res.length > 0) { if (res.length > 0) {
const series = []; const series = [];
const legend = []; const legend = [];
@@ -1121,7 +1137,7 @@
visible: true, visible: true,
threshold: null, threshold: null,
}; };
if(!this.chart.type){ if(!this.chart.type || this.chart.from == 'endpoint'){
this.chart.type='line'; this.chart.type='line';
} }
res.forEach((response,pos) => { res.forEach((response,pos) => {
@@ -1211,7 +1227,7 @@
this.setColor(legend.length); this.setColor(legend.length);
this.initChart(this.chart,series, this.$refs.screenShowArea,legend); this.initChart(this.chart,series, this.$refs.screenShowArea,legend);
} }
}).catch((error) => { }).catch(error => {
if (error) { if (error) {
this.$message.error(error.toString()); this.$message.error(error.toString());
} }

2
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -655,6 +655,7 @@
axisLine:{ axisLine:{
show:false show:false
}, },
minInterval: 1,
axisTick: { axisTick: {
show: false, show: false,
}, },
@@ -1082,6 +1083,7 @@
} }
let step = bus.getStep(startTime,endTime); let step = bus.getStep(startTime,endTime);
if (type === 'list') { // 普通模式,主控台使用 if (type === 'list') { // 普通模式,主控台使用
console.info(this.data);
axiosArr = this.data.elements.map((ele) => { axiosArr = this.data.elements.map((ele) => {
const filterItem = ele; const filterItem = ele;
let query = encodeURIComponent(filterItem.expression); let query = encodeURIComponent(filterItem.expression);

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

@@ -15,10 +15,10 @@
<!------TAB区------> <!------TAB区------>
<!--通用详情--> <!--通用详情-->
<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab" <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
v-if="targetTab == 'detail'" v-if="targetTab == 'detail'"
@changeTab="changeTab" @changeTab="changeTab"
></common-detail-tab> ></common-detail-tab>-->
<!--机柜--> <!--机柜-->
<cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab> <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
<!--告警信息--> <!--告警信息-->
@@ -26,17 +26,17 @@
<!--asset页的endpoint列表--> <!--asset页的endpoint列表-->
<endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab> <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
<!--endpoint页的asset详情--> <!--endpoint页的asset详情-->
<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab" <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
v-if="targetTab == 'assetDetail' && from == 'endpoint'" v-if="targetTab == 'assetDetail' && from == 'endpoint'"
@changeTab="changeTab"></common-detail-tab> @changeTab="changeTab"></common-detail-tab>-->
<!--endpoint-query--> <!--endpoint-query-->
<endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab> <endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab" ref="endpointQuery"></endpoint-query-tab>
<!--alertMessage页的详情--> <!--alertMessage页的详情-->
<template v-if="from == 'alertMessage'"> <!--<template v-if="from == 'alertMessage'">
<common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]" <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab> v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
</template> </template>-->
<!-- model-panel/asset-detail/project-overview的panel--> <!-- model-panel/asset-detail/project-overview的panel-->
<panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab" <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
@@ -75,7 +75,7 @@
detail: Object, //对象详情内容 detail: Object, //对象详情内容
detailList: Array, //多个对象详情内容 detailList: Array, //多个对象详情内容
assetDetail: Array, //endpoint页的asset详情 assetDetail: Object, //endpoint页的asset详情
}, },
data() { data() {
return {} return {}

2
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -19,7 +19,7 @@
class="margin-l-20" class="margin-l-20"
> >
<template slot="optionZone"> <template slot="optionZone">
<button @click.stop="toAdd" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project"> <button @click.stop="toAdd" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<i class="nz-icon nz-icon-create-square"></i> <i class="nz-icon nz-icon-create-square"></i>
</button> </button>
</template> </template>

3
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -649,6 +649,9 @@
</style> </style>
<style lang="scss"> <style lang="scss">
.nz-dashboard-dropdown {
z-index: 3001 !important;
}
.panel .top-tools input { .panel .top-tools input {
background-color: $content-right-background-color; background-color: $content-right-background-color;
} }

32
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -262,7 +262,7 @@
return { return {
loading: false, loading: false,
/*二级页面相关*/ /*二级页面相关*/
assetDetail: [], //asset详情 assetDetail: {}, //asset详情
alertMsgAsset: {}, //告警信息对应的asset对象 alertMsgAsset: {}, //告警信息对应的asset对象
showElementSet: false, //控制自定义列的弹框 showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里 inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
@@ -896,8 +896,32 @@
this.getAssetData(); this.getAssetData();
}, },
convertToDetail(obj) { convertToDetail(obj) {
let detail = []; let detail = JSON.parse(JSON.stringify(obj));
detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn}); detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
detail.assetType = obj.model.type.value;
detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
detail.dataCenter = obj.idc ? obj.idc.name : "";
detail.location = obj.idc ? obj.idc.location : "";
detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : "";
detail.tel = obj.idc ? obj.idc.tel : "";
detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
detail.remark = obj.idc ? obj.idc.remark : "";
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
detail.protocol = account.protocol;
detail.account = account.user;
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
}
detail.loginType = loginType;
detail.port = account.port;
}
/*detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host}); detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')}); detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum}); detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
@@ -929,7 +953,7 @@
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user}); detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
} }
detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port}); detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
} }*/
return detail; return detail;
}, },
formatPingTime:function(str){ formatPingTime:function(str){

31
nezha-fronted/src/components/page/project/project.vue
View File

@@ -196,7 +196,7 @@
return { return {
loading: false, loading: false,
assetDetail: [], //asset详情 assetDetail: {}, //asset详情
endpointDetail: [], endpointDetail: [],
targetTab: '', targetTab: '',
mainTableHeight: this.$tableHeight.normal, //主列表table高度 mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -693,8 +693,31 @@
} }
}, },
assetConvertToDetail(obj) { assetConvertToDetail(obj) {
let detail = []; let detail = JSON.parse(JSON.stringify(obj));
detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn}); detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
detail.assetType = obj.model.type.value;
detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
detail.dataCenter = obj.idc ? obj.idc.name : "";
detail.location = obj.idc ? obj.idc.location : "";
detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : "";
detail.tel = obj.idc ? obj.idc.tel : "";
detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
detail.remark = obj.idc ? obj.idc.remark : "";
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
detail.protocol = account.protocol;
detail.account = account.user;
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
}
detail.loginType = loginType;
detail.port = account.port;
}
/*detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host}); detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')}); detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum}); detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
@@ -728,7 +751,7 @@
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user}); detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
} }
detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port}); detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
} }*/
return detail; return detail;
}, },
getPrincipalName(data) { getPrincipalName(data) {