diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue
index b8050bbe5..8899eb593 100644
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -1396,7 +1396,7 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
- chartBox.style.height = `${item.height}px`
+ chartBox.style.height = `${document.getElementById('listContainer').offsetWidth / 12 * item.height}px`
}
})
},
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index b0cf05b38..81254452b 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -224,6 +224,7 @@ 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 { chartResizeTool } from '@/components/common/js/tools'
// import visNetwork from './visNetwork'
export default {
name: 'chartList',
@@ -254,6 +255,7 @@ export default {
},
data () {
return {
+ chartResizeTool: chartResizeTool,
filter: {},
dataList: [], // 看板中所有图表信息
dataListDragTmp: [],
@@ -272,7 +274,7 @@ export default {
pagePanelId: '', // 当前分页的panelId
dragging: null,
// chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
- stepHeight: 50,
+ stepWidth: null,
tempDom: { height: '', width: '' }
// showShadow:false,
@@ -558,7 +560,7 @@ export default {
panelId: 0,
title: this.$t('alert.config.chart.affectEntity'),
span: 4,
- height: 350,
+ height: 3,
type: 'alertRuleInfo',
prev: 0,
next: -9,
@@ -572,7 +574,7 @@ export default {
panelId: 0,
title: this.$t('alert.config.chart.alertNumTrend'),
span: 8,
- height: 350,
+ height: 6,
type: 'line',
prev: -10,
next: -1,
@@ -622,7 +624,7 @@ export default {
dataId: this.additionalInfo.id,
title: this.$t('project.chart.endpointInfo'),
span: 6,
- height: 350,
+ height: 4,
type: 'endpointInfo',
prev: 0,
next: -9,
@@ -639,7 +641,7 @@ export default {
panelId: 0,
title: this.$t('asset.assetInfo'),
span: 6,
- height: 350,
+ height: 4,
type: 'assetInfo',
prev: -10,
next: -8,
@@ -1698,7 +1700,7 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
- chartBox.style.height = `${item.height}px`
+ chartBox.style.height = `${this.stepWidth * item.height}px`
if (item.type === 'group') {
chartBox.style.height = 'auto'
}
@@ -1832,6 +1834,8 @@ export default {
this.chartDataCacheGroup = new Map()
},
mounted () {
+ this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth)
+ console.info(this.stepWidth)
this.tempDomInit()
}
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index a78561aee..b1405c5a6 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -183,7 +183,8 @@ export default {
},
extraCssText: 'z-index:1000;'
},
- series: null
+ series: null,
+ stepWidth: null
}
}
},
@@ -354,6 +355,7 @@ export default {
},
initChart: function (type) {
this.option.series = this.pieData
+ this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
if (type == 'local') {
this.initLocal()
} else {
@@ -382,12 +384,13 @@ export default {
}
this.$nextTick(() => {
+ const vm = this
setTimeout(function () {
const divHeight = self.$refs.legendArea.offsetHeight
if (!self.chartData.height) {
getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
} else {
- getChart(self.chartIndex).resize({ height: (self.chartData.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+ getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
}
self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 77a0436db..304f47572 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -285,7 +285,7 @@ export default {
resize (chartItem) {
const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
- container.style.height = `calc(100% - ${deHeight * 2}px)`
+ container.style.height = `calc(100% - ${deHeight}px)`
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`
},
showLoad (chartItem) {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 4e6e5bdd0..662c5435b 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -198,7 +198,7 @@ import chartDataFormat from './chartDataFormat'
import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
import chartConfig from '../page/dashboard/overview/chartConfig'
import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
-import { getMetricTypeValue } from '../common/js/tools'
+import { getMetricTypeValue, chartResizeTool } from '../common/js/tools'
import moment from 'moment-timezone'
export default {
@@ -304,7 +304,9 @@ export default {
screenTitleHeight: 58,
hasLegendOptions: false,
/* legendOptions:[], */
- screenLegendOptions: []
+ screenLegendOptions: [],
+
+ stepWidth: null
}
},
watch: {
@@ -595,7 +597,7 @@ export default {
// chartId='screenShowArea';
}
const chartWidth = ele.clientWidth
-
+ this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
const stackIconBorderColor = (chartInfo.type === 'stackArea' ? '#53a3cb' : '#7e7e7e')
const stackIconChooseBorderColor = (chartInfo.type === 'stackArea' ? '#7e7e7e' : '#53a3cb')
let maxValueCopies = this.getMaxValue(dataArg, chartInfo)
@@ -954,12 +956,13 @@ export default {
this.computeLegendData(this.legendListMore, dataArg, 'local')
}
this.$nextTick(() => {
+ const vm = this
setTimeout(function () {
const divHeight = self.$refs.legendArea.offsetHeight
if (!chartInfo.height) {
- getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+ getChart(self.chartIndex).resize({ height: (400 - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
} else {
- getChart(self.chartIndex).resize({ height: (chartInfo.height - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
+ getChart(self.chartIndex).resize({ height: (chartInfo.height * vm.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
}
if (dataArg && dataArg.length > 0) {
getChart(self.chartIndex).clear()
@@ -1808,7 +1811,7 @@ export default {
if (!this.chartInfo.height) {
getChart(this.chartIndex).resize({ height: (400 - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
} else {
- getChart(this.chartIndex).resize({ height: (this.chartInfo.height - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
+ getChart(this.chartIndex).resize({ height: (this.chartInfo.height * this.stepWidth - divHeight - this.$chartResizeTool.titleHeight - this.$chartResizeTool.chartBlankHeight) })
}
})
},
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index c2913b7cd..73fa495a9 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -380,12 +380,12 @@ export function unixTimeParseToString (unixTime, fmt = 'yyyy-MM-dd hh:mm:ss') {
export const chartResizeTool = {
minHeight: 200, // 图表最小高度
chartPaddingTop: 2, // 图表padding-top
- chartBlankHeight: 4, // 图表空白占位高度(padding-top + border)
+ chartBlankHeight: 10, // 图表空白占位高度(padding-top + border)
chartTableBlankHeight: 6, // 表格型图表额外空白占位高度
- chartBlankWidth: 2, // 图表空白占位宽度
- containerBlankWidth: 5, // 容器空白占位宽度（#listContainer的padding）
+ chartBlankWidth: 10, // 图表空白占位宽度
+ containerBlankWidth: 30, // 容器空白占位宽度（#listContainer的padding）
titleHeight: 40, // 标题dom高度
- stepHeight: 50, // 单元高度
+ // stepHeight: 50, // 单元高度
timeouter: null,
stepWidth (containerWidth) { // 单元宽度，参数为容器总宽度
return (containerWidth - this.containerBlankWidth) / 12
@@ -412,18 +412,14 @@ export const chartResizeTool = {
const chartBlankWidth = this.chartBlankWidth
const chartBlankHeight = this.chartBlankHeight
const titleHeight = this.titleHeight
- let stepWidth = document.getElementById('listContainer').offsetWidth
- if (data.groupId) {
- stepWidth = document.getElementById('listContainer' + data.groupId).offsetWidth - 20
- }
- stepWidth = this.stepWidth(stepWidth)
- const stepHeight = this.stepHeight
+ const domWidth = data.groupId ? document.getElementById('listContainer' + data.groupId).offsetWidth - 20 : document.getElementById('listContainer').offsetWidth
+ const step = this.stepWidth(domWidth)
const mouseOriginalX = event.clientX // 鼠标初始坐标
const mouseOriginalY = event.clientY
- const originalWidth = stepWidth * data.span // 图表、阴影初始宽高
+ const originalWidth = step * data.span // 图表、阴影初始宽高
let shadowNewWidth = originalWidth
- const originalHeight = data.height
+ const originalHeight = step * data.height
let shadowNewHeight = originalHeight
// 1.激活背景阴影
@@ -440,16 +436,16 @@ export const chartResizeTool = {
box.style.width = `${originalWidth + (mouseX - mouseOriginalX) - chartBlankWidth}px`
box.style.height = `${originalHeight + (mouseY - mouseOriginalY) - chartBlankHeight}px`
// 监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
- const remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % stepWidth // 宽的余数
- const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % stepHeight // 高的余数
+ const remainderWidth = (box.offsetWidth + chartBlankWidth - shadowNewWidth) % step // 宽的余数
+ const remainderHeight = (box.offsetHeight + chartBlankHeight - shadowNewHeight) % step // 高的余数
boxStepHandler(remainderWidth, remainderHeight)
}
function mouseupListener (e) {
// 将resize-box的宽高设为resize-shadow的宽高
box.style.width = `${shadow.offsetWidth}px`
box.style.height = `${Math.round((shadow.offsetHeight) / chartPaddingTop) * chartPaddingTop}px`
- data.height = Math.round((box.offsetHeight + chartPaddingTop) / stepHeight) * stepHeight
- data.span = Math.round((box.offsetWidth + chartBlankWidth) / stepWidth)
+ data.height = Math.round((box.offsetHeight + chartPaddingTop) / step)
+ data.span = Math.round((box.offsetWidth + chartBlankWidth) / step)
// 请求后台，保存变更
if (data.height != originalData.height || data.span != originalData.span) {
originalData.height = data.height
@@ -465,29 +461,29 @@ export const chartResizeTool = {
function boxStepHandler (width, height, chartIndex) { // param: 宽高变化量，大于0放大，小于0缩小
let widthChange = false
let heightChange = false
- if (width > stepWidth / 2) { // 放大shadow宽
+ if (width > step / 2) { // 放大shadow宽
widthChange = true
// 判断是否因为百分数计算的宽度有小数的原因导致宽度超过当前行，使图表错误换行
- const currentWidth = shadow.offsetWidth + stepWidth
- const currentSpan = Math.round((currentWidth + chartBlankWidth) / stepWidth)
- const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+ const currentWidth = shadow.offsetWidth + step
+ const currentSpan = Math.round((currentWidth + chartBlankWidth) / step)
+ const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度
shadow.style.width = `${calcWidth}px`
- } else if (width <= 0 - (stepWidth / 2)) { // 缩小shadow宽
+ } else if (width <= 0 - (step / 2)) { // 缩小shadow宽
widthChange = true
- const currentWidth = shadow.offsetWidth - stepWidth
- const currentSpan = Math.round(currentWidth / stepWidth)
- const calcWidth = currentSpan * stepWidth - chartBlankWidth // 不会换行的宽度
+ const currentWidth = shadow.offsetWidth - step
+ const currentSpan = Math.round(currentWidth / step)
+ const calcWidth = currentSpan * step - chartBlankWidth // 不会换行的宽度
shadow.style.width = `${calcWidth}px`
}
if (widthChange) {
shadowNewWidth = shadow.offsetWidth
}
- if (height > stepHeight / 2) { // 放大shadow高
+ if (height > step / 2) { // 放大shadow高
heightChange = true
- shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + stepHeight}px`
- } else if (height <= 0 - (stepHeight / 2)) { // 缩小shadow高
+ shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop + step}px`
+ } else if (height <= 0 - (step / 2)) { // 缩小shadow高
heightChange = true
- shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - stepHeight}px`
+ shadow.style.height = `${Math.round(shadow.offsetHeight / chartPaddingTop) * chartPaddingTop - step}px`
}
if (heightChange) {
shadowNewHeight = shadow.offsetHeight + chartBlankHeight
diff --git a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
index d43e523f9..c42806846 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
@@ -85,9 +85,9 @@ export default {
chartlList: [], // chart 列表数据
ChartSearchShowFields: [ // ChartSearch 下拉搜索表头
{ title: 'ID', data: 'id' },
- { title: this.$t("config.model.titleName"), data: 'name' },
- { title: this.$t("config.model.titleType"), data: 'type' },
- { title: this.$t("config.model.remark"), data: 'remark' }
+ { title: this.$t('config.model.titleName'), data: 'name' },
+ { title: this.$t('config.model.titleType'), data: 'type' },
+ { title: this.$t('config.model.remark'), data: 'remark' }
],
url: 'asset/model',
brandUrl: 'asset/brand',
@@ -95,7 +95,7 @@ export default {
roles: [],
rules: {
name: [
- { required: true, message: '必填', trigger: 'blur' }
+ { required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
brandId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index d3ea2415e..38d9da35d 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -222,7 +222,7 @@
- {{ item }}