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

NEZ-784 NEZ-770 ：endpoint 名字拼接后过长从中间截取一部分 ，以及新增 Diagram 图表类型

Browse Source
This commit is contained in:
zhangyu
2021-07-01 19:15:08 +08:00
parent b2e6175cca
commit c778cf2eb4
10 changed files with 407 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/charts/diagram-chart.vue
View File

@@ -41,7 +41,7 @@
</div>
<div class="mt-10 rich-text-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="text-content" >
<diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" ref="diagram"/>
<diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram"/>
</div>
</div>
<!--全屏-->
@@ -53,7 +53,7 @@
</div>
<div class="rich-text-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="text-content" >
<diagram :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
<diagram :topoData="data.param.topo" :fromChart="true" :isScreen="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
</div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>

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

@@ -7,7 +7,7 @@
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<div v-if="from!=='project'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
<div v-if="from!=='project'&&from!=='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
<el-popover
v-if="isError"
placement="top-start"
@@ -65,6 +65,9 @@
</ul>
</el-dropdown>
</div>
<div v-if="from==='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="topology-chart-title">
<span class="topology-chart-title-text">{{chartData.name}}</span>
</div>
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
@@ -1344,6 +1347,7 @@ export default {
},
// 设置数据, filter区分
setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
console.log(chartItem, seriesItem, panelId, filter, legend, area, errorMsg)
legend && this.setColor(legend.length)
legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
this.filter.from = filter.from

27
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -6,7 +6,7 @@
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
<div class="main-list">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'" style="background: #fff">
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
<!--工具栏-->
<span v-if="!isPreview" class="project-topology-tool">
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -202,11 +202,11 @@
<!--节点连线相关的 tooltip-->
<div v-if="tooltipPosition.show&&!editTopologyFlag"
ref="topoTooltip"
:style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
:style="{position:isScreen?'fixed' : 'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
@mouseout="tooltipOut"
@mouseover="tooltipOver"
>
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime" :isPanel="isPanel"/>
</div>
</div>
<!--endpoint-->
@@ -517,6 +517,14 @@ export default {
fromTopologyDialog: {
type: Boolean,
default: false
},
isPanel: {
type: Boolean,
default: false
},
isScreen: {
type: Boolean,
default: false
}
},
watch: {
@@ -1138,6 +1146,7 @@ export default {
setTimeout(() => {
this.tooltipPosition.show = true
const ePosition = window.ePosition
console.log(ePosition)
const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
this.tooltipPosition.left = ePosition.layerX + 20
@@ -1155,6 +1164,10 @@ export default {
this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
}
}
if (this.isScreen) {
this.tooltipPosition.left = ePosition.offsetX + 50
this.tooltipPosition.top = ePosition.offsetY + 80
}
})
}, 100)
break
@@ -1753,6 +1766,14 @@ export default {
return true
}
})
item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
if (!expression) {
item.data.legendsAll.splice(i, 1)
return false
} else {
return true
}
})
})
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
getTopology(this.topologyIndex).data.scale = this.oldScale

12
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -104,21 +104,17 @@
<div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Labels</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
<div class="alert-label-title">Configs</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.configs ? alertLabelData.configs : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
<div class="alert-label-title">ManageIp</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.asset ? alertLabelData.asset.manageIp : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Port</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Path</div>
<div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
</div>
</div>
</div>
</template>

8
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1014,10 +1014,10 @@ export default {
// id: 'bar',
// name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
// },
{
id: 'table',
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
}
// {
// id: 'table',
// name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
// }
],
aggregationList: [
{

238
nezha-fronted/src/components/common/project/L5/topoTooltip.vue
View File

@@ -1,10 +1,11 @@
<template>
<div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressArr.length">
<div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
<div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressAllArr.length">
<div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressAllArr.length)">
<line-chart-block v-show="isChart || chartData.type !== 'table'"
:key="'inner' + chartData.id"
:class="isPanel? 'topology-tool-tip' : ''"
id="listContainer"
:from="'project'"
:from="'topology'"
:ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
:temp-dom="tempDom"
:panel-id="-1"
@@ -34,6 +35,10 @@ import lineChartBlock from '../../../charts/line-chart-block'
import chartTable from '../../../charts/chart-table'
import bus from '../../../../libs/bus'
import ExpressionInfo from '../popData/expressionInfo'
import {fromRoute} from "@/components/common/js/constants";
import chartTempData from "@/components/charts/chartTempData";
import axios from "axios";
import chartDataFormat from "@/components/charts/chartDataFormat";
export default {
name: 'topoTooltip',
components: {
@@ -49,6 +54,10 @@ export default {
isChart: {
type: Boolean,
default: false
},
isPanel: {
type: Boolean,
default: false
}
},
watch: {
@@ -70,7 +79,7 @@ export default {
panelId: 0,
searchName: '',
start_time: bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss')
}
},
}
},
mounted () {
@@ -81,13 +90,12 @@ export default {
this.tempDom.width = 250
},
process (item) {
console.log(item)
const chartData = { ...this.chartDataTemp, ...item, name: item.chartTitle }
chartData.elements = []
chartData.expressArr.forEach((item1, index) => {
chartData.expressAllArr.forEach((item1, index) => {
chartData.elements.push({
expression: item1,
legend: chartData.legends[index],
legend: chartData.legendsAll[index],
type: 'expert',
id: index,
buildIn: null,
@@ -106,9 +114,7 @@ export default {
}
chartData.span = 12
this.chartData = chartData
setTimeout(() => {
this.getChartData(chartData, 0)
})
},
// 获取一个图表具体数据,图表信息，图表位置index
getChartData (chartInfo, pos, filterType) {
@@ -122,33 +128,30 @@ export default {
}
})
} else {
/* let startTime = ''
let endTime = '' */
/* if (filterType === 'refresh') { // 刷新
const now = new Date(bus.computeTimezone(new Date().getTime()))
const origin = new Date(this.filter.end_time)
const numInterval = now.getTime() - origin.getTime()
if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
startTime = this.getNewTime(this.filter.start_time, numInterval)
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
} else {
startTime = this.filter.start_time
endTime = this.filter.end_time
}
} else if (filterType === 'showFullScreen') { // 全屏时间查询
startTime = this.filter.start_time
endTime = this.filter.end_time
// this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
} else {
startTime = this.filter.start_time
endTime = this.filter.end_time
} */
setTimeout(() => {
const endTime = this.filter.end_time
const startTime = this.filter.start_time
const step = bus.getStep(startTime, endTime)
this.$nextTick(() => {
const res = chartItem.res
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele
let query = filterItem.expression
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
chartInfo.param.nullType = chartInfo.param.nullType || 'null'
query += '&nullType=' + chartInfo.param.nullType
}
// 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单独获取数据
axios.all(axiosArr).then((res) => {
if (res.length > 0) {
const series = []
let singleStatRlt = ''
const legend = []
const tableData = []
/* let sumData = {
@@ -158,11 +161,67 @@ export default {
threshold: null,
}; */
let errorMsg = ''
let pieSeries
if (chartInfo.type === 'pie') {
pieSeries = {
type: 'pie',
radius: '100%',
center: ['50%', '50%'],
top: '20%',
bottom: '20%',
// roseType: 'radius',
minAngle: 10,
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
data: []
}
}
if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
pieSeries = {
type: 'bar',
// roseType: 'radius',
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 1
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
data: []
}
}
res.forEach((response, innerPos) => {
if (response.status === 'success') {
errorMsg = ''
if (response.data.result) {
// 循环处理每个elements下获取的数据
// 循环处理每个elements下获取的数据列
if (chartItem.type === 'singleStat') {
if (response.data.result.length === 1) {
const statistics = chartItem.param.statistics || 'null'
if (response.data.result[0].values) {
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
}
} else if (response.data.result.length > 1) {
singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
}
} else {
response.data.result.forEach((queryItem, resIndex) => {
let seriesItem = {
theData: {
@@ -182,13 +241,18 @@ export default {
metric_name: ''
}
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
seriesItem.theData.markLine = {
silent: true,
symbol: ['circle', 'circle'],
label: {
distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
formatter: function (params) {
formatter (params) {
return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
}
},
@@ -254,23 +318,41 @@ export default {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
const tData = new Date(dpsItem[0] * 1000)
const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
// let t_date = new Date(dpsItem[0] * 1000);
// let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({ // 表格数据
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: { element: host, alias: alias },
time: timeTmp, // 采集时间
value: dpsItem[1], // 数值
// time: timeTmp,//采集时间
// value: dpsItem[1],//数值
data: [dpsItem[0] * 1000, dpsItem[1]]
})
return [dpsItem[0] * 1000, dpsItem[1]]
})
if (chartInfo.type === 'pie') {
pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
} else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
} else {
series.push(seriesItem.theData)
seriesItem = null
}
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
})
}
}
} else {
if (response.msg) {
// this.$message.error(response.msg);
@@ -285,7 +367,13 @@ export default {
}
})
if (this.$refs['editChart' + chartItem.type]) {
/* const chartData = {
if (chartInfo.type === 'pie') {
series.push(pieSeries)
}
if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
series.push(pieSeries)
}
const chartData = {
chartItem: chartItem,
series: series,
singleStatRlt: singleStatRlt,
@@ -295,30 +383,73 @@ export default {
filter: this.filter,
filterType: filterType,
errorMsg: errorMsg
} */
}
if (chartItem.type === 'table') { // 表格
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData, this.filter.panelId, this.filter, '', errorMsg)
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
if (filterType === 'showFullScreen') { // 全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
this.filter.panelId, this.filter, filterType, errorMsg)
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
this.filter.panelId, this.filter, '', errorMsg)
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
if (series.length && chartItem.type === 4) { // 曲线汇总
// series.push(sumData);//后续需要
}
this.$refs['editChart' + chartItem.type].setData(chartItem, series, this.filter.panelId, this.filter, legend, '', errorMsg)
if (filterType === 'showFullScreen') { // 全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, series,
this.filter.panelId, this.filter, legend, filterType, errorMsg)
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, series,
this.filter.panelId, this.filter, legend, '', errorMsg)
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') { // 全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, filterType, errorMsg)
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, '', errorMsg)
}
}
}
} else {
const type = chartItem.type
if (this.$refs['editChart' + chartItem.type]) {
if (type === 'table') {
if (filterType === 'showFullScreen') { // table的全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
this.filter, filterType)
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
this.filter)
}
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
if (filterType === 'showFullScreen') { // table的全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
this.filter, filterType)
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
this.filter)
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') { // 全屏查询
this.$refs['editChart' + chartItem.type].setData(chartItem, '',
this.filter.panelId, this.filter, filterType)
} else {
this.$refs['editChart' + chartItem.type].setData(chartItem, '',
this.filter.panelId, this.filter)
}
}
}
}
}).catch((error) => {
if (error) {
this.$message.error(error.toString())
console.error(error)
}
})
})
}, 100)
}
}
}
@@ -351,5 +482,18 @@ export default {
max-width: 300px;
}
}
/deep/ .topology-chart-title{
text-align: left;
width: 100%;
line-height: 20px;
height: 24px;
padding: 5px 10px 0 10px;
box-sizing: border-box;
}
.topology-tool-tip /deep/ .topology-chart-title{
margin-top: -23px;
}
.topology-tool-tip /deep/ .line-area{
margin-top: -15px;
}
</style>

72
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -6,9 +6,9 @@
<div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
<div class="main-list">
<div class="main-container" :class="fromOverView?'from-overview':'from-project'">
<div v-if="editTopologyFlag" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
<div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
<!--工具栏-->
<span class="project-topology-tool">
<span v-if="!isPreview" class="project-topology-tool">
<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>
@@ -99,10 +99,15 @@
</span>
<span class="float-right">
<button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
<button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
style="margin-right: 20px"
>
{{$t('project.topology.preview')}}
</button>
<button @click="previewExit" v-if="isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
style="margin-right: 20px"
>
{{$t('project.topology.previewExit')}}
</button>
<button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
:disabled="prevent_opt.save"
@@ -115,7 +120,7 @@
</button>
</span>
</div>
<div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
<div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
<div>{{topologyInfo.name}}</div>
<div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
<pick-time
@@ -498,7 +503,9 @@ export default {
unit: ''
},
unitArr: [],
topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
topoScreenState: '', // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
isPreview: false,
previewData: ''
}
},
components: {
@@ -531,6 +538,10 @@ export default {
type: Boolean,
default: false
},
fromChart: {
type: Boolean,
default: false
},
topoPrevDataS: {
}
@@ -775,6 +786,9 @@ export default {
}
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
let data = res.data.topo
if (this.isPreview) {
data = this.previewData
}
// data = JSON.parse(localStorage.getItem('topoData'))
if (!res.data.topo || !data.pens) {
data = {
@@ -1840,6 +1854,8 @@ export default {
},
// 保存
saveTopology () {
this.previewData = ''
this.isPreview = false
const topologyData = getTopology(this.topologyIndex).pureData()
// console.log(JSON.stringify(topologyData))
let flag = true
@@ -1930,6 +1946,8 @@ export default {
},
// 取消
cancelTopology () {
this.isPreview = false
this.previewData = ''
this.editTopologyFlag = false
this.$nextTick(() => {
getTopology(this.topologyIndex).lock(1)
@@ -1941,14 +1959,46 @@ export default {
},
// 预览
previewTopology () {
const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
data.pens.forEach((item) => {
const topologyData = getTopology(this.topologyIndex).pureData()
this.previewData = topologyData
this.isPreview = true
this.editTopologyFlag = false
topologyData.rule = false
topologyData.grid = false
topologyData.gridSize = 10
topologyData.pens.forEach(item => {
item.animatePlay = item.data.animatePlay
item.data.animateType = item.animateType
if (item.type === 0 && JSON.stringify(item.data.imageId)) {
item.image = ''
item.animateFrames = []
item.animateReady = null
delete item.img
delete item.lastImage
}
item.data.expressArr = item.data.expressArr.filter((expression, i) => {
if (!expression) {
item.data.legends.splice(i, 1)
return false
} else {
return true
}
})
this.topoPrevData = JSON.parse(JSON.stringify(data))
this.topoPrevData.rule = false
this.topoPrevData.grid = false
this.previewShow = true
})
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
getTopology(this.topologyIndex).data.scale = this.oldScale
}
this.$nextTick(() => {
this.previewData = topologyData
getTopology(this.topologyIndex).lock(1)
const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
getTopology(this.topologyIndex).canvasPos = domRect
this.reload()
})
},
previewExit () { // 继续编辑
this.isPreview = false
this.editTopology()
},
// 联动 project

5
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -628,6 +628,11 @@ export default {
if (res.code === 200) {
res.data.list.forEach((item, index) => {
const obj = item
if (obj.name.length > 64) {
const length = obj.name.length - 64
const lastIndex = obj.name.lastIndexOf('-')
obj.name = obj.name.substring(0, 64 - length) + obj.name.substring(lastIndex)
}
obj.configs = JSON.parse(obj.configs)
obj.labelModule = []
if (obj.configs.labels !== '{}' && obj.configs.labels) {

16
nezha-fronted/src/components/common/table/settings/projectTable.vue
View File

@@ -64,8 +64,7 @@
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
:width="operationWidth">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="changeProjectTopo(scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
@@ -102,32 +101,25 @@ export default {
label: this.$t('project.project.project'),
prop: 'name',
show: true,
minWidth: 150,
sortable: 'custom'
}, {
label: this.$t('project.module.module'),
prop: 'moduleNum',
show: true,
width: 150,
width: 100,
sortable: 'custom'
}, {
label: this.$t('project.endpoint.endpoint'),
prop: 'endpointNum',
show: true,
width: 150,
width: 120,
sortable: 'custom'
}, {
label: this.$t('project.endpoint.alerts'),
prop: 'alertNum',
show: true,
width: 150,
width: 100,
sortable: 'custom'
},
{
label: this.$t('overall.remark'),
prop: 'remark',
show: false,
minWidth: 150
}
]
}

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

@@ -154,7 +154,7 @@
width: 100vw;
top: 0;
left: 0;
z-index: 1;
z-index: 11;
}
.topology-mc{
width: 100%;