diff --git a/nezha-fronted/index.html b/nezha-fronted/index.html index 182b1c1b6..4c7d00a6f 100644 --- a/nezha-fronted/index.html +++ b/nezha-fronted/index.html @@ -4,6 +4,7 @@ + Nezha diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue index 10330bb29..13caa42e9 100644 --- a/nezha-fronted/src/App.vue +++ b/nezha-fronted/src/App.vue @@ -15,9 +15,6 @@ export default { browserWindowZoom }, async created () { - if (window.outerWidth <= 1024) { // outerWidth 获取设备宽度 - document.querySelector('meta[name=viewport]').setAttribute('content', `width=device-width, initial-scale=${window.outerWidth / (1024 * window.devicePixelRatio)}, maximum-scale=1.0, user-scalable=0`) - } const herfSpiltArr = window.location.href.split('/') if (herfSpiltArr[3] !== '#') { herfSpiltArr[3] = '#' @@ -28,6 +25,7 @@ export default { const result = await this.$http.get(url) this.$axios.defaults.baseURL = result.body.baseUrl const version = result.body.version + const defaultWindowWidth = result.body.width || 1024 if (version !== localStorage.getItem('nz-version')) { localStorage.clear() localStorage.clear() @@ -35,6 +33,9 @@ export default { herfSpiltArr[2] = herfSpiltArr[2] + '?t=' + new Date().getTime() window.location.href = herfSpiltArr[0] + '//' + herfSpiltArr[2] } + if (window.outerWidth <= defaultWindowWidth) { // outerWidth 获取设备宽度 + document.querySelector('meta[name=viewport]').setAttribute('content', `width=device-width, initial-scale=${window.outerWidth / (defaultWindowWidth * window.devicePixelRatio)}, maximum-scale=1.0, user-scalable=0`) + } } } diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index b66e76bf4..2bd0c8f84 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -73,6 +73,9 @@ .green-bg { background-color:$--color-success !important; } +.yellow-bg { + background-color:$--color-silence !important; +} .gray-bg { background-color: $--color-suspended !important; } diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index c2a202a7d..ffdfcd502 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -401,6 +401,11 @@ } } } +.endpoint-query-metrics.chart-fullscreen.nz-dialog { + .chart-screen-header .chart-header__tools #browser-go { + margin-left: 5px; + } +} .chart-fullscreen.nz-dialog { .el-dialog__header{ display: none; diff --git a/nezha-fronted/src/assets/css/components/common/chartUnit.scss b/nezha-fronted/src/assets/css/components/common/chartUnit.scss index 53c65715a..fed06acfb 100644 --- a/nezha-fronted/src/assets/css/components/common/chartUnit.scss +++ b/nezha-fronted/src/assets/css/components/common/chartUnit.scss @@ -20,5 +20,6 @@ } .chart-unit .el-input__inner { border-top-left-radius: 0 !important; + border-color: $--border-color-base; border-bottom-left-radius: 0 !important; } diff --git a/nezha-fronted/src/assets/css/components/common/login.scss b/nezha-fronted/src/assets/css/components/common/login.scss index ba983f320..d915a9f64 100644 --- a/nezha-fronted/src/assets/css/components/common/login.scss +++ b/nezha-fronted/src/assets/css/components/common/login.scss @@ -164,7 +164,7 @@ text-align: center; line-height: 30px; display: flex; - justify-content: space-around; + justify-content: space-between; .license-info { margin-bottom: 10px; color: white; diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss index 30c04b673..d8833a65d 100644 --- a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss +++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss @@ -1,6 +1,6 @@ .props-box label { line-height: 32px; - width: 100px; + width: 120px; font-size: 14px; text-align: right; } diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss index 543dd6808..de815de3c 100644 --- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss +++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss @@ -61,6 +61,7 @@ .chart-title-config { border: 1px solid $--border-color-light; border-radius: 2px; + position: relative; display: flex; padding: 0; padding-left: 5px; @@ -159,9 +160,11 @@ height: 25px; line-height: 25px; border-radius: 5px; - margin-left: 120px; padding: 0 3px; text-align: center; + position: absolute; + top: 0; + left: 200px; } .element-item { padding: 0; diff --git a/nezha-fronted/src/assets/css/components/common/searchInput.scss b/nezha-fronted/src/assets/css/components/common/searchInput.scss index 88e6d085a..f8ae74d46 100644 --- a/nezha-fronted/src/assets/css/components/common/searchInput.scss +++ b/nezha-fronted/src/assets/css/components/common/searchInput.scss @@ -46,6 +46,12 @@ display: flex; position: relative; } +@media screen and (max-width:2000px){ + .bottom-data-list .new-search .search-input-all{ + width: 176px !important; + min-width: 176px; + } +} .search-input-all .btn-retract{ padding: 0 4px; text-align: center; diff --git a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss index e79e19333..5c380bfa0 100644 --- a/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss +++ b/nezha-fronted/src/assets/css/components/common/table/alert/alertMessageTable.scss @@ -101,3 +101,8 @@ .nz-message .el-textarea textarea{ height: 108px !important; } +.alert-message-state{ + padding: 3px 5px; + border-radius: 4px; + color: $--color-text-primary; +} diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss index dc99c629b..e70dee7a6 100644 --- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss +++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss @@ -39,31 +39,40 @@ } .panel { - .el-table { - border-radius: 5px; - border-left: 1px solid $--border-color-light; - border-top: 1px solid $--border-color-light; - .el-table__body-wrapper { - height: calc(100% - 65px) !important; + .right-box.right-box-chart-temp { + .el-table { + border-radius: 5px; + .el-table__body-wrapper { + height: calc(100% - 40px) !important; + } + th.is-center { + border-right: none; + } + th { + border-right: 1px solid $--border-color-light; + } + th:nth-of-type(2) { + border-left: 1px solid $--border-color-light; + } + tr { + background-color: $--background-color-empty; + } + td { + border-bottom: 1px solid $--border-color-light; + } + th.is-leaf { + border-bottom: 1px solid $--border-color-light; + } } - th { - border-right: 1px solid $--border-color-light; - } - tr { - background-color: $--background-color-empty; - } - td { + .el-table--border th.gutter:last-of-type { border-bottom: 1px solid $--border-color-light; } - th.is-leaf { - border-bottom: 1px solid $--border-color-light; + .el-table--border::after { + background-color: $--border-color-light; + } + .el-table::before { + display: none; } - } - .el-table--border th.gutter:last-of-type { - border-bottom: 1px solid $--border-color-light; - } - .el-table--border::after { - background-color: $--border-color-light; } } /* begin-chart list*/ diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss index 95bdc1a69..11ef03a7e 100644 --- a/nezha-fronted/src/assets/css/themes/theme-dark.scss +++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss @@ -69,6 +69,8 @@ $--color-info: #999998; $--color-suspended: #9e9c98; // 监控色 $--color-monitor: #98AEC5; +// silence +$--color-silence: #FFC107; /* 6.table */ // 表头字色 diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss index 413cd8ff3..8ceb5e38a 100644 --- a/nezha-fronted/src/assets/css/themes/theme-light.scss +++ b/nezha-fronted/src/assets/css/themes/theme-light.scss @@ -69,6 +69,8 @@ $--color-info: #999998; $--color-suspended: #9e9c98; // 监控色 $--color-monitor: #98AEC5; +// sliences +$--color-silence: #FFC107; /* 6.table */ // 表头字色 diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue index d9a2ca165..28ba0ebbd 100644 --- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue +++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue @@ -26,7 +26,7 @@ -
{{chartInfo.name}}
+
{{chartInfo.name}}
@@ -58,7 +58,7 @@ diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index f6c30f835..52cbaa08d 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -151,8 +151,8 @@ export default { this.tooltip.show = false }, getLayout () { - this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 2 * this.boxPadding - this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 2 * this.boxPadding + this.boxWidth = this.$refs['chart-stat-box'].offsetWidth - 3 * this.boxPadding + this.boxHeight = this.$refs['chart-stat-box'].offsetHeight - 3 * this.boxPadding return new Promise(resolve => { let rateMax = 0 let col = 0 diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index dde2bf9f3..dd492c34f 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/nezha-fronted/src/components/chart/chart/chartTable.vue @@ -67,7 +67,7 @@ export default { } this.tableTimer = setTimeout(() => { this.columns = this.chartInfo.param.columns - this.chartInfo.param.valueMapping.forEach((item) => { + this.chartInfo.param.valueMapping && this.chartInfo.param.valueMapping.forEach((item) => { if (this.valueMapping[item.column]) { this.valueMapping[item.column].push(item) } else { @@ -94,7 +94,7 @@ export default { initTableData (chartInfo, originalDatas) { let colorIndex = 0 const returnData = {} - const arr = chartInfo.param.indexs.split(',') + const arr = chartInfo.param.indexs ? chartInfo.param.indexs.split(',') : [] const tableInitialData = lodash.cloneDeep(originalDatas) tableInitialData.forEach((originalData, expressionIndex) => { let key = expressionIndex @@ -107,7 +107,7 @@ export default { originalData.forEach((data, dataIndex) => { this.isNoData = false data.$labels = data.metric - const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last') + const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last') + '' const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2) // const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping) data.$value = value diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index de5c081bd..77d408b6f 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -42,7 +42,7 @@ export default { data () { return { stackTotalColor: null, - isStack: false, + isStack: false } }, computed: { @@ -93,6 +93,9 @@ export default { /* 使用setTimeout延迟渲染图表,避免样式错乱 */ setTimeout(() => { const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) + if (!myChart) { + return + } myChart.setOption(chartOption) this.isInit && setChart(this.chartId, myChart) // 缓存;不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit = false @@ -108,7 +111,7 @@ export default { let seriesIndex = 0 originalDatas.forEach((originalData, expressionIndex) => { originalData.forEach((data, dataIndex) => { - if (seriesIndex >= this.series.length) {// 只取跟series 一样长度作比较 + if (seriesIndex >= this.series.length) { // 只取跟series 一样长度作比较 return } seriesIndex++ diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index 3137d16cb..f43004259 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -86,6 +86,9 @@ export default { /* 使用setTimeout延迟渲染图表,避免样式错乱 */ setTimeout(() => { const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) + if (!myChart) { + return + } myChart.setOption(chartOption) this.isInit && setChart(this.chartId, myChart) // 缓存;不使用vue的data是为避免整个chart被监听导致卡顿 this.isInit = false diff --git a/nezha-fronted/src/components/chart/chart/grid/TestElement.vue b/nezha-fronted/src/components/chart/chart/grid/TestElement.vue index 2868a4b02..f04198a61 100644 --- a/nezha-fronted/src/components/chart/chart/grid/TestElement.vue +++ b/nezha-fronted/src/components/chart/chart/grid/TestElement.vue @@ -6,20 +6,20 @@ \ No newline at end of file + }, + data: function () { + return { + } + }, + mounted: function () { + console.log('### ' + this.text + ' ready!') + } +} + diff --git a/nezha-fronted/src/components/chart/chart/grid/aspectRatio.js b/nezha-fronted/src/components/chart/chart/grid/aspectRatio.js index 56db68ee5..1fb5f42fd 100644 --- a/nezha-fronted/src/components/chart/chart/grid/aspectRatio.js +++ b/nezha-fronted/src/components/chart/chart/grid/aspectRatio.js @@ -15,97 +15,97 @@ * }); * ``` */ -import extend from "../utils/extend.js"; -import { addEdges } from "../utils/rect.js"; -import Modification from "./Modification.js"; -import { makeModifier } from "./base.js"; +import extend from '../utils/extend.js' +import { addEdges } from '../utils/rect.js' +import Modification from './Modification.js' +import { makeModifier } from './base.js' const aspectRatio = { - start(arg) { + start (arg) { const { state, rect, edges: originalEdges, pageCoords: coords - } = arg; + } = arg let { ratio - } = state.options; + } = state.options const { equalDelta, modifiers - } = state.options; + } = state.options if (ratio === 'preserve') { - ratio = rect.width / rect.height; + ratio = rect.width / rect.height } - state.startCoords = extend({}, coords); - state.startRect = extend({}, rect); - state.ratio = ratio; - state.equalDelta = equalDelta; + state.startCoords = extend({}, coords) + state.startRect = extend({}, rect) + state.ratio = ratio + state.equalDelta = equalDelta const linkedEdges = state.linkedEdges = { top: originalEdges.top || originalEdges.left && !originalEdges.bottom, left: originalEdges.left || originalEdges.top && !originalEdges.right, bottom: originalEdges.bottom || originalEdges.right && !originalEdges.top, right: originalEdges.right || originalEdges.bottom && !originalEdges.left - }; - state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right); + } + state.xIsPrimaryAxis = !!(originalEdges.left || originalEdges.right) if (state.equalDelta) { - state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1); + state.edgeSign = (linkedEdges.left ? 1 : -1) * (linkedEdges.top ? 1 : -1) } else { - const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left; - state.edgeSign = negativeSecondaryEdge ? -1 : 1; + const negativeSecondaryEdge = state.xIsPrimaryAxis ? linkedEdges.top : linkedEdges.left + state.edgeSign = negativeSecondaryEdge ? -1 : 1 } - extend(arg.edges, linkedEdges); - if (!modifiers || !modifiers.length) return; - const subModification = new Modification(arg.interaction); - subModification.copyFrom(arg.interaction.modification); - subModification.prepareStates(modifiers); - state.subModification = subModification; - subModification.startAll({ ...arg - }); + extend(arg.edges, linkedEdges) + if (!modifiers || !modifiers.length) return + const subModification = new Modification(arg.interaction) + subModification.copyFrom(arg.interaction.modification) + subModification.prepareStates(modifiers) + state.subModification = subModification + subModification.startAll({ ...arg }) }, - set(arg) { + set (arg) { const { state, rect, coords - } = arg; - const initialCoords = extend({}, coords); - const aspectMethod = state.equalDelta ? setEqualDelta : setRatio; - aspectMethod(state, state.xIsPrimaryAxis, coords, rect); + } = arg + const initialCoords = extend({}, coords) + const aspectMethod = state.equalDelta ? setEqualDelta : setRatio + aspectMethod(state, state.xIsPrimaryAxis, coords, rect) if (!state.subModification) { - return null; + return null } - const correctedRect = extend({}, rect); + const correctedRect = extend({}, rect) addEdges(state.linkedEdges, correctedRect, { x: coords.x - initialCoords.x, y: coords.y - initialCoords.y - }); - const result = state.subModification.setAll({ ...arg, + }) + const result = state.subModification.setAll({ + ...arg, rect: correctedRect, edges: state.linkedEdges, pageCoords: coords, prevCoords: coords, prevRect: correctedRect - }); + }) const { delta - } = result; + } = result if (result.changed) { - const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y); // do aspect modification again with critical edge axis as primary + const xIsCriticalAxis = Math.abs(delta.x) > Math.abs(delta.y) // do aspect modification again with critical edge axis as primary - aspectMethod(state, xIsCriticalAxis, result.coords, result.rect); - extend(coords, result.coords); + aspectMethod(state, xIsCriticalAxis, result.coords, result.rect) + extend(coords, result.coords) } - return result.eventProps; + return result.eventProps }, defaults: { @@ -114,34 +114,34 @@ const aspectRatio = { modifiers: [], enabled: false } -}; +} -function setEqualDelta({ +function setEqualDelta ({ startCoords, edgeSign }, xIsPrimaryAxis, coords) { if (xIsPrimaryAxis) { - coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign; + coords.y = startCoords.y + (coords.x - startCoords.x) * edgeSign } else { - coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign; + coords.x = startCoords.x + (coords.y - startCoords.y) * edgeSign } } -function setRatio({ +function setRatio ({ startRect, startCoords, ratio, edgeSign }, xIsPrimaryAxis, coords, rect) { if (xIsPrimaryAxis) { - const newHeight = rect.width / ratio; - coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign; + const newHeight = rect.width / ratio + coords.y = startCoords.y + (newHeight - startRect.height) * edgeSign } else { - const newWidth = rect.height * ratio; - coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign; + const newWidth = rect.height * ratio + coords.x = startCoords.x + (newWidth - startRect.width) * edgeSign } } -export default makeModifier(aspectRatio, 'aspectRatio'); -export { aspectRatio }; -//# sourceMappingURL=aspectRatio.js.map \ No newline at end of file +export default makeModifier(aspectRatio, 'aspectRatio') +export { aspectRatio } +// # sourceMappingURL=aspectRatio.js.map diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js index 06abb88d7..900e5533f 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js @@ -19,7 +19,7 @@ const chartTreemapOption = { return [ '
' + formatUtil.encodeHTML(treePath.join('/')) + - '
', + '
' ].join('') } }, diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js index fe94b5efd..46f374ce2 100644 --- a/nezha-fronted/src/components/chart/chart/tools.js +++ b/nezha-fronted/src/components/chart/chart/tools.js @@ -43,7 +43,7 @@ export function getOption (type) { chartOption = lodash.cloneDeep(chartTreemapOption) break } - case chartType.guage: { + case chartType.gauge: { chartOption = lodash.cloneDeep(chartGaugeOption) break } @@ -109,7 +109,7 @@ export function isTable (type) { return type === chartType.table } export function isGauge (type) { - return type === chartType.guage + return type === chartType.gauge } export function isClock (type) { return type === chartType.clock diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue index 08b01a160..6ffa94932 100644 --- a/nezha-fronted/src/components/chart/chartHeader.vue +++ b/nezha-fronted/src/components/chart/chartHeader.vue @@ -26,7 +26,7 @@ -
{{chartInfo.name}}
+
{{chartInfo.name}}
{{chartInfo.name}} @@ -41,6 +41,11 @@ + + + + + @@ -87,6 +92,13 @@ export default { methods: { openUrl () { window.open(this.chartInfo.param.link) + }, + addChartGroup () { + this.$store.commit('setGroupId', this.chartInfo.id) + this.$store.dispatch('dispatchEditChart', { + chart: '', + type: 'addGroupItem' + }) } } } diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 7112ffa7f..4be18f26b 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -48,6 +48,7 @@ :from="from" :time-range="timeRange" :chart-detail-info="chartDetailInfo" + @refreshPanel="refreshPanel" @showFullscreen="showFullscreen" > @@ -280,13 +281,15 @@ export default { panelId: this.panelId, charts: charts } - this.$put('/visual/panel/chart/weights', params).then(() => { - const position = getLayoutPosition(this.copyDataList) - this.$store.commit('setChartLastPosition', position) - }) - }, 300) + if (charts && charts.length) { + this.$put('/visual/panel/chart/weights', params).then(() => { + const position = getLayoutPosition(this.copyDataList) + this.$store.commit('setChartLastPosition', position) + }) + } + }, 1000) }, - onScroll (scrollTop = 0) { + onScroll (scrollTop = 0, groupTop = 0) { const self = this if (this.scrollTopTimer) { clearTimeout(this.scrollTopTimer) @@ -294,19 +297,25 @@ export default { } this.scrollTopTimer = setTimeout(() => { this.copyDataList.forEach(item => { - if (item.loaded) { - return + if (!this.$refs['grid-item' + item.id] || !this.$refs['grid-item' + item.id][0]) { + return; } const dom = this.$refs['grid-item' + item.id][0].$el if (dom) { + let top = dom.style.top + top = Number(top.substring(0, top.length - 2)) + groupTop + if (item.type === 'group') { + this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].$refs.chart && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id] && this.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.onScroll(scrollTop, top) + } + if (item.loaded) { + return + } const itemHeight = dom.offsetHeight // 1.元素距离页面顶部的距离 // console.log(dom.style.transform) // let top = dom.style.transform.split(',')[1] // top = top.substring(0, top.length - 2) - let top = dom.style.top - top = top.substring(0, top.length - 2) const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。 // 2.元素的高度 const mainHeight = itemHeight // ele.offsetHeight;//itemHeight; @@ -316,13 +325,16 @@ export default { // 4.浏览器可见区域的高度 const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70 // console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight)) - if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight) || self.isGroup) { + if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight)) { item.loaded = true this.$refs['chart' + item.id][0].getChartData() } } }) }, 200) + }, + refreshPanel () { + bus.$emit('refreshPanel') } }, created () { @@ -335,9 +347,6 @@ export default { this.$store.commit('setChartListId', `chartList${this.timestamp}`) } }, - beforeDestroy () { - this.$store.dispatch('dispatchPanelLock', { flag: true }) - }, watch: { dataList: { deep: true, diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 1571af507..52e23910b 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -163,7 +163,7 @@ export default { }, selectMapping (value, valueMapping, show) { let mapping = '' - if (show) { + if (show && valueMapping) { valueMapping.forEach(item => { if (item.type === 'value') { if (value == item.value) { @@ -263,7 +263,7 @@ export default { chartData: { deep: true, handler (n) { - if (!this.isInit) { + if (!this.isInit && this.chartOption.color) { this.colorList = this.colorList.slice(0, 20) this.chartOption.color = this.chartOption.color.slice(0, 20) this.initChart(this.chartOption) diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 8ad1370ba..16ba3e590 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -14,6 +14,7 @@ @loadMore="loadMore" @edit-chart="$emit('edit-chart', chartInfo)" @refresh="refresh" + @sync="chartSync" @groupShow="groupShow" @showFullscreen="showFullscreen" > @@ -43,6 +44,7 @@ :panelLock="panelLock" :filter="filter" :from="from" + @refreshLogs="refreshLogs" :show-header="showHeader" :isError="isError" :loading="loading" @@ -128,7 +130,7 @@ export default { this.chartInfo.loaded && this.query(elements, startTime, endTime, step) }, // 参数 isRefresh 标识是否是刷新操作 - getChartData (isRefresh) { + getChartData (isRefresh, params) { this.loading = true // TODO assetInfo、endpointInfo、echarts等进行不同的处理 let startTime = '' @@ -152,9 +154,9 @@ export default { startTime = this.$stringTimeParseToUnix(startTime) endTime = this.$stringTimeParseToUnix(endTime) const elements = this.chartInfo.elements || [] - this.chartInfo.loaded && this.query(elements, startTime, endTime, step) + this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params) }, - query (elements, startTime, endTime, step) { + query (elements, startTime, endTime, step, params) { this.isError = false this.allDataLength = 0 try { @@ -192,11 +194,18 @@ export default { } if (this.chartInfo.datasource === 'logs') { query += '&format=1' + if (!params || params.descending) { + this.chartInfo.descending = true + query += '&direction=backward' + } else { + this.chartInfo.descending = false + query += '&direction=forward' + } } // if (isChartPie(this.chartInfo.type)) { // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // } - query += `&query=${element.expression}` + query += `&query=${encodeURIComponent(element.expression)}` return this.$get(query) }) if (this.multipleTime) { @@ -217,7 +226,7 @@ export default { // if (isChartPie(this.chartInfo.type)) { // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // } - query += `&query=${element.expression}` + query += `&query=${encodeURIComponent(element.expression)}` return this.$get(query) }) requests = requests.concat(multipleRequests) @@ -334,6 +343,7 @@ export default { } if (this.chartInfo.type === 'group') { this.chartData = lodash.get(this, 'chartInfo.children', []) + this.loading = false this.groupInit() } if (this.chartInfo.type === 'topology') { @@ -346,7 +356,6 @@ export default { } } } catch (e) { - console.info(e) this.loading = false } }, @@ -382,6 +391,9 @@ export default { refresh () { this.getChartData(true) }, + refreshLogs (params) { + this.getChartData(true, params) + }, logChartDataFormat () { this.chartData.forEach((item, index) => { const elements = this.chartInfo.elements[index] @@ -439,6 +451,17 @@ export default { }, saveChart () { this.$emit('saveChart', this.chartInfo) + }, + chartSync () { + this.loading = true + this.$post('visual/panel/chart/syncTmpl', { ids: [this.chartInfo.id] }).then(res => { + if (res.code === 200) { + this.$message.success(this.$t('tip.syncSuccess')) + this.$emit('refreshPanel') + } else { + this.$message.error(res.msg) + } + }) } }, watch: { diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue index 316002fc9..f9246417c 100644 --- a/nezha-fronted/src/components/charts/chart-alert-list.vue +++ b/nezha-fronted/src/components/charts/chart-alert-list.vue @@ -77,7 +77,7 @@
- +
{{data.name}}
@@ -126,7 +126,6 @@ :visible.sync="graphShow" width="90%" :append-to-body="true" - id="viewGraphDialog" @close="dialogClose" :modal-append-to-body="false">
{{$t("project.endpoint.dialogTitle")}} diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue index 7cb49eb21..01f93bd0d 100644 --- a/nezha-fronted/src/components/charts/chart-list-group.vue +++ b/nezha-fronted/src/components/charts/chart-list-group.vue @@ -512,7 +512,7 @@ export default { // this.getChartData(item, index, this.filter) this.setChartSize(item, index) const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0]; - this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index, true) + this.handleElementInViewport(chartBox, this.childrenScrollTop, item, index, true) }) }, loadChartData (scrollTop) { diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index a8063ae1e..9334695b5 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -849,7 +849,7 @@ export default { if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) { if (filterType === 'refresh') { this.$get('visual/panel/chart/' + chartItem.id).then(res => { - const data = res.data.data + const data = res.data data.param = JSON.parse(data.param) this.$refs['editChart' + chartItem.id][0].setData(data, null, this.filter.panelId, null, '') diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue index 196a5da18..d748acfa2 100644 --- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue +++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue @@ -1796,6 +1796,9 @@ export default { this.imgageLoading = true this.$get('monitor/project/topo/icon').then((imageAllId) => { const promiseArr = [] + if (!imageAllId || !imageAllId.data) { + return + } imgidList.forEach((item, index) => { if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) { promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`)) diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue index 1143df75e..e4d9ca8b4 100644 --- a/nezha-fronted/src/components/common/alert/alertLabel.vue +++ b/nezha-fronted/src/components/common/alert/alertLabel.vue @@ -318,7 +318,7 @@ export default { return { alertLabelData: null, loading: true, - heightList: 0, + heightList: 0 } }, watch: { @@ -452,6 +452,9 @@ export default { } params[this.type + 'Id'] = this.id this.$get('/stat/alertMessage/trend', params).then((res) => { + if (!res.data) { + return + } const alertDaysData = res.data.result ? res.data.result[0].values : [] const newWeekDays = JSON.parse(JSON.stringify(weekDays)) alertDaysData.forEach(item => { diff --git a/nezha-fronted/src/components/common/alert/alertLabel2.vue b/nezha-fronted/src/components/common/alert/alertLabel2.vue index 8e3bb6711..07feb41bd 100644 --- a/nezha-fronted/src/components/common/alert/alertLabel2.vue +++ b/nezha-fronted/src/components/common/alert/alertLabel2.vue @@ -443,6 +443,9 @@ export default { } params[this.type + 'Id'] = this.id this.$get('/stat/alertMessage/trend', params).then((res) => { + if (!res.data) { + return + } const alertDaysData = res.data.result ? res.data.result[0].values : [] const newWeekDays = JSON.parse(JSON.stringify(weekDays)) alertDaysData.forEach(item => { diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue index 6067e3f53..ddb945eaf 100644 --- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue +++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue @@ -157,6 +157,9 @@ export default { } params['rule' + 'Id'] = this.id this.$get('/stat/alertMessage/trend', params).then((res) => { + if (!res.data) { + return + } const alertDaysData = res.data.result ? res.data.result[0].values : [] const newWeekDays = JSON.parse(JSON.stringify(weekDays)) alertDaysData.forEach(item => { diff --git a/nezha-fronted/src/components/common/alert/nzTooltip.vue b/nezha-fronted/src/components/common/alert/nzTooltip.vue index 82c27f1b2..b80ee029f 100644 --- a/nezha-fronted/src/components/common/alert/nzTooltip.vue +++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue @@ -81,4 +81,3 @@ export default { } } - diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue index dd91d2519..be962ab13 100644 --- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue +++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue @@ -1,5 +1,5 @@