fix:优化 group 折叠的问题 补充国际化

This commit is contained in:
zhangyu
2022-03-29 17:59:56 +08:00
parent 3a4239d351
commit 9c4e4e17b5
9 changed files with 22 additions and 68 deletions

View File

@@ -5,7 +5,10 @@
<div class="legend--table"> <div class="legend--table">
<div class="legend--table-row table-header"> <div class="legend--table-row table-header">
<div class="legend--table-cell"></div> <div class="legend--table-cell"></div>
<div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">{{statistics}}</div> <div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">
<span v-if="statisticsList.find(key=>key.value === statistics)">{{$t(statisticsList.find(key=>key.value === statistics).label)}}</span>
<span v-else>--</span>
</div>
</div> </div>
<div v-for="(item, index) in legends" <div v-for="(item, index) in legends"
:key="index" :key="index"
@@ -40,6 +43,7 @@
import lodash from 'lodash' import lodash from 'lodash'
import { getChart } from '@/components/common/js/common' import { getChart } from '@/components/common/js/common'
import chartDataFormat from '@/components/charts/chartDataFormat' import chartDataFormat from '@/components/charts/chartDataFormat'
import { statisticsList } from '@/components/common/js/constants'
export default { export default {
name: 'chartLegend', name: 'chartLegend',
props: { props: {
@@ -51,6 +55,7 @@ export default {
}, },
data () { data () {
return { return {
statisticsList,
isGrey: [], isGrey: [],
legendDefaultCount: 20, // 初始显示的legend条数 legendDefaultCount: 20, // 初始显示的legend条数
showLegends: [], // 要显示的legend若legend数量过多初始时这个数据里只有前20条legend showLegends: [], // 要显示的legend若legend数量过多初始时这个数据里只有前20条legend

View File

@@ -305,15 +305,16 @@ export default {
if (dom) { if (dom) {
let top = dom.style.top let top = dom.style.top
top = Number(top.substring(0, top.length - 2)) + groupTop top = Number(top.substring(0, top.length - 2)) + groupTop
if (item.type === 'group' && item.loaded) {
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)
return
}
if (item.type === 'group' && !item.loaded) { if (item.type === 'group' && !item.loaded) {
item.loaded = true item.loaded = true
this.$refs['chart' + item.id][0].getChartData() this.$refs['chart' + item.id][0].getChartData()
}
if (item.type === 'group') {
setTimeout(() => { setTimeout(() => {
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) 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)
},100) },300)
return
} }
if (item.loaded) { if (item.loaded) {
return return

View File

@@ -495,7 +495,7 @@ export default {
}) })
break break
} }
case 'average': { case 'avg': {
result = classifies.map(group => { result = classifies.map(group => {
const groupData = group.map(t => parseFloat(t.data[1])) const groupData = group.map(t => parseFloat(t.data[1]))
const sum = eval(groupData.join('+')) const sum = eval(groupData.join('+'))

View File

@@ -1449,7 +1449,7 @@ export default {
}) })
break break
} }
case 'average': { case 'avg': {
result = classifies.map(group => { result = classifies.map(group => {
const groupData = group.map(t => parseFloat(t.data[1])) const groupData = group.map(t => parseFloat(t.data[1]))
const sum = eval(groupData.join('+')) const sum = eval(groupData.join('+'))

View File

@@ -212,7 +212,7 @@ export const alertMessage = {
export const statisticsList = [ export const statisticsList = [
{ value: 'min', label: i18n.t('dashboard.panel.chartForm.statisticsVal.min') }, { value: 'min', label: i18n.t('dashboard.panel.chartForm.statisticsVal.min') },
{ value: 'max', label: i18n.t('dashboard.panel.chartForm.statisticsVal.max') }, { value: 'max', label: i18n.t('dashboard.panel.chartForm.statisticsVal.max') },
{ value: 'average', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') }, { value: 'avg', label: i18n.t('dashboard.panel.chartForm.statisticsVal.average') },
{ value: 'total', label: i18n.t('dashboard.panel.chartForm.statisticsVal.total') }, { value: 'total', label: i18n.t('dashboard.panel.chartForm.statisticsVal.total') },
{ value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') }, { value: 'first', label: i18n.t('dashboard.panel.chartForm.statisticsVal.first') },
{ value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') }, { value: 'last', label: i18n.t('dashboard.panel.chartForm.statisticsVal.last') },

View File

@@ -13,7 +13,7 @@ export const clickoutside = {
let oldValue let oldValue
try { try {
oldValue = JSON.parse(JSON.stringify(binding.value.obj)) oldValue = JSON.parse(JSON.stringify(binding.value.obj))
el.__oldValue__ = oldValue el.__newValue__ = oldValue
} catch (e) { } catch (e) {
} }
@@ -37,8 +37,8 @@ export const clickoutside = {
return false return false
} }
if (oldValue) { if (oldValue) {
const newValue = JSON.parse(JSON.stringify(binding.value.obj)) // const newValue = JSON.parse(JSON.stringify(binding.value.obj))
if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) { if (unsavedChange == 'on' && !isEqual(oldValue, el.__newValue__)) {
MessageBox.confirm(i18n.t('tip.confirmCancel'), { MessageBox.confirm(i18n.t('tip.confirmCancel'), {
confirmButtonText: i18n.t('tip.yes'), confirmButtonText: i18n.t('tip.yes'),
cancelButtonText: i18n.t('tip.no'), cancelButtonText: i18n.t('tip.no'),
@@ -68,59 +68,7 @@ export const clickoutside = {
document.addEventListener('mousedown', documentHandler) document.addEventListener('mousedown', documentHandler)
}, },
update (el, binding, vnode) { update (el, binding, vnode) {
if (!binding.expression) return el.__newValue__ = binding.value.obj
const oldValue = el.__oldValue__
const unsavedChange = localStorage.getItem('nz-unnsaved-change')
document.removeEventListener('mousedown', el.__vueClickOutside__)
function documentHandler (e) {
if (el.contains(e.target)) {
return false
} else {
let flag = true
const path = e.path || (e.composedPath && e.composedPath())
// eslint-disable-next-line no-labels
top: for (let i = 0; i < path.length; i++) {
for (let j = 0; j < exceptClassName.length; j++) {
if (path[i].className && path[i].className.indexOf && path[i].className.indexOf(exceptClassName[j]) !== -1) {
flag = false
// eslint-disable-next-line no-labels
break top
}
}
}
if (!flag) {
return false
}
if (oldValue) {
const newValue = JSON.parse(JSON.stringify(binding.value.obj))
if (unsavedChange == 'on' && !isEqual(oldValue, newValue)) {
MessageBox.confirm(i18n.t('tip.confirmCancel'), {
confirmButtonText: i18n.t('tip.yes'),
cancelButtonText: i18n.t('tip.no'),
type: 'warning'
}).then(() => {
if (binding.value.func) {
binding.value.func()
}
})
} else {
binding.value.func()
}
} else {
if (binding.arg) {
binding.value(e, binding.arg)
} else {
if (binding.value) {
binding.value(e)
}
}
}
}
}
// 给当前元素绑定个私有变量方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler
document.addEventListener('mousedown', documentHandler)
}, },
unbind (el, binding) { unbind (el, binding) {
// 解除事件监听 // 解除事件监听
@@ -922,7 +870,7 @@ export function getMetricTypeValue (queryItem, type) {
const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1] const max = copy.sort((x, y) => { return parseFloat(y[1]) - parseFloat(x[1]) })[0][1]
return max return max
} }
case 'average': { case 'avg': {
copy = copy.map(t => parseFloat(t[1])) copy = copy.map(t => parseFloat(t[1]))
const sum = eval(copy.join('+')) const sum = eval(copy.join('+'))
const avg = sum / copy.length const avg = sum / copy.length

View File

@@ -349,7 +349,7 @@ const cn = {
statisticsVal: { statisticsVal: {
min: 'Min', min: 'Min',
max: 'Max', max: 'Max',
average: 'Average', avg: 'Avg',
total: 'Total', total: 'Total',
first: 'First', first: 'First',
last: 'Last', last: 'Last',

View File

@@ -365,7 +365,7 @@ const en = {
statisticsVal: { statisticsVal: {
min: 'Min', min: 'Min',
max: 'Max', max: 'Max',
average: 'Average', avg: 'Avg',
total: 'Total', total: 'Total',
first: 'First', first: 'First',
last: 'Last', last: 'Last',

View File

@@ -192,7 +192,7 @@ export default new Vue({
statisticsRlt = dataArray.reduce(function (a, b) { statisticsRlt = dataArray.reduce(function (a, b) {
return b > a ? b : a return b > a ? b : a
}) })
} else if (statistics === 'average') { // average:平均值 } else if (statistics === 'avg') { // avg:平均值
let sum = 0 let sum = 0
dataArray.forEach((item) => { dataArray.forEach((item) => {
sum = Number(sum) + Number(item) sum = Number(sum) + Number(item)