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

Merge branch 'dev-3.10' of git.mesalab.cn:nezha/nezha-fronted into dev-3.10

Browse Source
This commit is contained in:
zyh
2023-11-16 16:52:38 +08:00
parent 765b520212 5744a90e0a
commit 72d728ed9c
14 changed files with 94 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/build/webpack.prod.conf.js
View File

@@ -82,7 +82,7 @@ if (arg === 'html') {
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
pure_funcs: ['console.log', 'console.error']
}
},
exclude: /manifest.+js/,

3
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -553,6 +553,9 @@ export default {
// 计算字体大小
calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) {
const el = this.$refs['temp-dom']
if (!el) {
return 12
}
el.innerText = text
const elWidth = el.offsetWidth
const fontSizeBasedOnWidth = (width / elWidth) * 14

3
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -201,6 +201,9 @@ export default {
// 计算字体大小
calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) {
const el = this.$refs['temp-dom']
if (!el) {
return 12
}
el.innerText = text
const elWidth = el.offsetWidth
const fontSizeBasedOnWidth = (width / elWidth) * 14

69
nezha-fronted/src/components/chart/chart/chartMap.vue
View File

@@ -62,6 +62,7 @@ import axios from 'axios'
import 'leaflet/dist/leaflet.css'
import maplibregl from 'maplibre-gl'
import mapAllStyle from './mapStyle'
import { getChart, setChart, chartCache } from '@/components/common/js/common'
const regNum = /^[0-9]+.?[0-9]*/
export default {
name: 'chartMap',
@@ -69,7 +70,7 @@ export default {
data () {
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
return {
map: null,
mapId: null,
tooltip: {
x: 0,
y: 0,
@@ -116,12 +117,14 @@ export default {
const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
mapStyle.center = [Number(mapConfig.longitude), Number(mapConfig.latitude)]
mapStyle.zoom = Number(mapConfig.zoom)
if (this.map) {
this.map.remove()
this.map = null
const mapId = this.mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id)
let map = getChart(mapId) || null
if (map) {
map.remove()
map = null
setChart(this.mapId, map)
}
const mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id)
this.map = new maplibregl.Map({
map = new maplibregl.Map({
container: mapId,
style: mapStyle,
maxZoom: mapConfig.maxZoom || 7,
@@ -161,7 +164,8 @@ export default {
}
}
})
this.map.on('load', this.mapLoad)
map.on('load', this.mapLoad)
setChart(mapId, map)
maplibregl.addProtocol('nzMap', (params, callback) => { // 切片显示接口 防止跨域的问题
fetch(`${params.url.split('://')[1]}`)
.then(t => {
@@ -184,13 +188,21 @@ export default {
})
},
mapLoad () {
const map = getChart(this.mapId)
if (!map) {
return
}
this.loadDataCenterMapData()
this.map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
const mapboxglInner = document.getElementsByClassName('mapboxgl-ctrl-attrib-inner')
mapboxglInner[0].innerHTML = '<span>&copy; MapTiler</span> <span>&copy; OpenStreetMap contributors</span>'
},
loadDataCenterMapData () {
const self = this
const map = getChart(this.mapId)
if (!map) {
return
}
return new Promise(resolve => {
const requests = [axios.get('dc?pageSize=-1'), axios.get('/stat/overview/map')]
axios.all(requests).then(result => {
@@ -223,8 +235,8 @@ export default {
}
})
this.renderPoint(dcStats)
self.map.on('mouseenter', 'pointLayer', self.pointEnter)
self.map.on('mouseleave', 'pointLayer', self.pointLeave)
map.on('mouseenter', 'pointLayer', self.pointEnter)
map.on('mouseleave', 'pointLayer', self.pointLeave)
self.pointAnimation(0)
})
})
@@ -255,6 +267,10 @@ export default {
},
renderPoint (dcStats) {
const arr = []
const map = getChart(this.mapId)
if (!map) {
return
}
dcStats.forEach(dcStat => {
arr.push({
type: 'Feature',
@@ -267,14 +283,14 @@ export default {
}
})
})
this.map.addSource('pointData', {
map.addSource('pointData', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: arr
}
})
this.map.addLayer({
map.addLayer({
id: 'pointLayer',
type: 'circle',
source: 'pointData',
@@ -302,9 +318,10 @@ export default {
})
},
pointAnimation (timeStep) {
const map = getChart(this.mapId)
const opacity = 0.5 + (timeStep % 1000) / 1000 / 2
if (this.map) {
this.map.setPaintProperty('pointLayer', 'circle-opacity', [
if (map) {
map.setPaintProperty('pointLayer', 'circle-opacity', [
'step',
['get', 'color'],
0.5,
@@ -318,8 +335,13 @@ export default {
},
resize () {
setTimeout(() => {
this.map && this.map.remove()
this.map = null
let map = getChart(this.mapId)
if (!map) {
return
}
map && map.remove()
map = null
setChart(this.mapId, null)
this.initChart()
}, 100)
}
@@ -329,11 +351,16 @@ export default {
clearTimeout(this.timer)
this.timer = null
}
this.map.off('load', this.mapLoad)
this.map.off('mouseenter', 'pointLayer', this.pointEnter)
this.map.off('mouseleave', 'pointLayer', this.pointLeave)
this.map && this.map.remove()
this.map = null
let map = getChart(this.mapId)
if (!map) {
return
}
map.off('load', this.mapLoad)
map.off('mouseenter', 'pointLayer', this.pointEnter)
map.off('mouseleave', 'pointLayer', this.pointLeave)
map.remove()
map = null
setChart(this.mapId, null)
}
}
</script>

6
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -95,7 +95,11 @@ export default {
}
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
if (!dom) {
return;
}
const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId)
if (!myChart) {
return
}

3
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -393,6 +393,9 @@ export default {
// 计算字体大小
calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) {
const el = this.$refs['temp-dom']
if (!el) {
return 12
}
el.innerText = text
const elWidth = el.offsetWidth
const fontSizeBasedOnWidth = (width / elWidth) * 14

3
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -160,6 +160,9 @@ export default {
// 有分页时根据表格高度计算显示条数
if (this.showPagination) {
const trHeight = 48
if (!this.$refs.dataTable) {
return
}
const tableHeight = this.$refs.dataTable.bodyWrapper.clientHeight
const pageSize = Math.floor(tableHeight / trHeight) || 1
this.pageObj.pageSize = pageSize

6
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -246,7 +246,11 @@ export default {
}
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
if (!dom) {
return;
}
const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId)
if (!myChart) {
return
}

6
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -119,7 +119,11 @@ export default {
}
/* 使用setTimeout延迟渲染图表，避免样式错乱 */
setTimeout(() => {
const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
if (!dom) {
return;
}
const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId)
if (!myChart) {
return
}

5
nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
View File

@@ -389,6 +389,9 @@ export default {
}
setTimeout(() => { // 延迟加载 保证legend的高度正常
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
if (!dom) {
return
}
const width = dom.offsetWidth
const height = dom.offsetHeight
opts.width = width
@@ -602,7 +605,7 @@ export default {
const chart = getChart(this.chartId)
if (chart) {
const over = chart.over
over.removeEventListener()
over.removeEventListener('mouseenter', this.uplotMouseenter)
chart.destroy()
}
}

6
nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js
View File

@@ -180,11 +180,11 @@ export default {
y = '-100%'
}
tooltip.style.transform = `translate(${x},${y})`
if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', false)) {
if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', true)) {
return
}
let params = []
const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'single')
const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'all')
if (self.chartInfo.param && !(tooltipModel == 'single')) {
params = u.series.map((s, i) => {
if (i == 0) return ''
@@ -263,7 +263,7 @@ export default {
// tooltip排序
let sortBy
if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip') && self.$lodash.get(self.chartInfo, 'param.tooltip.mode') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort') !== 'none') {
if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip', true) && self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'all') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort', 'none') !== 'none') {
sortBy = self.$lodash.get(self.chartInfo, 'param.tooltip.sort')
}
const previousIndex = arr.findIndex(item => item.seriesName.indexOf('Previous') !== -1)

14
nezha-fronted/src/components/chart/chart/uplot/stack.js
View File

@@ -31,7 +31,7 @@ function stack (data, omit) {
bands = bands.reverse()
return {
data: [data[0]].concat(data2),
bands
// bands
}
}
@@ -40,7 +40,7 @@ export default function getStackedOpts (title, opt, data, interp) {
const interped = interp ? interp(data) : data
const stacked = stack(interped, i => false)
opts.bands = stacked.bands
// opts.bands = stacked.bands
opts.cursor = opts.cursor || {}
@@ -48,16 +48,6 @@ export default function getStackedOpts (title, opt, data, interp) {
s.value = (u, v, si, i) => data[si][i]
})
// restack on toggle
opts.hooks = {
setSeries: [
(u, i) => {
const stacked = stack(data, i => !u.series[i].show)
u.delBand(null)
stacked.bands.forEach(b => u.addBand(b))
u.setData(stacked.data)
}
]
}
return { opts, data: stacked.data }
}

6
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -398,7 +398,8 @@ export default {
thresholds: false,
legend: true,
valueMapping: false,
visibility: false
visibility: false,
tooltip: true
},
thresholds: [{ id: s8(), value: undefined, color: '#eeeeeeff' }],
showHeader: this.editChart.param.showHeader,
@@ -705,6 +706,9 @@ export default {
max: undefined
}
}
if (obj.param.enable.tooltip === undefined) {
obj.param.enable.tooltip = true
}
if (!obj.param.tooltip || !obj.param.tooltip.mode) {
obj.param.tooltip = {
mode: 'all',

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

@@ -156,7 +156,6 @@
</template>
<script>
import * as echarts from 'echarts'
import { chartCache, clearTopology } from '@/components/common/js/common'
import { data as le5leData, observers as le5leObservers } from 'le5le-store/store/data.js'
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
@@ -1217,12 +1216,13 @@ export default {
chartCache[key].setOption(option)
}
this.$store.commit('setCurrentMousemove', 0)
console.log(value)
if (value && value !== 'none') {
this.$store.commit('setConnect', value)
echarts.connect('timeSeriesGroup')
// echarts.connect('timeSeriesGroup')
} else {
this.$store.commit('setConnect', value)
echarts.disconnect('timeSeriesGroup')
// echarts.disconnect('timeSeriesGroup')
}
}
},
@@ -1303,7 +1303,7 @@ export default {
// 页面销毁 清除图表联动
this.$store.commit('setCurrentMousemove', 0)
this.$store.commit('setConnect', 'none')
echarts.disconnect('timeSeriesGroup')
// echarts.disconnect('timeSeriesGroup')
this.$store.commit('setMode', '')