fix:优化 group 折叠的问题 补充国际化
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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('+'))
|
||||||
|
|||||||
@@ -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('+'))
|
||||||
|
|||||||
@@ -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') },
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user