138 lines
3.4 KiB
JavaScript
138 lines
3.4 KiB
JavaScript
export default {
|
|
props: {
|
|
chartInfo: Object,
|
|
from: String,
|
|
isGroup: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
error: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isError: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
chartData: {},
|
|
showAllData: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
allDataLength: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
isExportHtml: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showTool: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hiddenText: { // 隐藏图表的悬浮文字
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
dropdownMenuShow: false,
|
|
errorText: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showFullscreen () {
|
|
this.$emit('showFullscreen', true)
|
|
},
|
|
refreshChart () {
|
|
this.$emit('refresh')
|
|
},
|
|
editChart () {
|
|
// this.$emit('edit-chart', this.chartInfo)
|
|
this.$store.dispatch('dispatchEditChart', {
|
|
chart: this.chartInfo,
|
|
type: 'edit'
|
|
})
|
|
this.dropdownMenuShow = false
|
|
},
|
|
removeChart () {
|
|
this.$store.dispatch('dispatchDelChart', {
|
|
chart: this.chartInfo,
|
|
type: 'delete'
|
|
})
|
|
this.dropdownMenuShow = false
|
|
},
|
|
duplicate () {
|
|
const obj = this.$lodash.cloneDeep(this.chartInfo)
|
|
obj.elements = obj.oldElements
|
|
delete obj.oldElements
|
|
this.$store.dispatch('dispatchEditChart', {
|
|
chart: obj,
|
|
type: 'duplicate'
|
|
})
|
|
this.dropdownMenuShow = false
|
|
},
|
|
sync () {
|
|
this.$emit('sync')
|
|
this.dropdownMenuShow = false
|
|
},
|
|
clickos () {
|
|
this.dropdownMenuShow = false
|
|
},
|
|
groupShow () {
|
|
this.$emit('groupShow', !this.chartInfo.param.collapse)
|
|
},
|
|
loadMore () {
|
|
this.$emit('loadMore')
|
|
},
|
|
unitChange (val) {
|
|
this.$emit('unitChange', val)
|
|
}
|
|
},
|
|
computed: {
|
|
variablesArr () {
|
|
return this.$store.getters.getVariablesArr
|
|
},
|
|
// 所有类型 chart name 支持变量替换
|
|
nameFormate () {
|
|
let str = this.chartInfo.name
|
|
// group图表设置repeat的name替换
|
|
if (this.chartInfo.repeatVariable) {
|
|
const variable = this.chartInfo.repeatVariable
|
|
const reg = new RegExp('\\$' + variable, 'g')
|
|
str = str.replace(reg, this.chartInfo.repeatValue.replace(/\\"/g, '"').replace(/\\'/g, "'"))
|
|
}
|
|
let confirmReg = []
|
|
this.variablesArr.forEach(item => {
|
|
const reg = '$' + item.name // 后续需要考虑 item,name 使用特殊字符的问题
|
|
const index = this.chartInfo.name.indexOf(reg)
|
|
if (index !== -1) {
|
|
confirmReg.push(item)
|
|
}
|
|
})
|
|
confirmReg = this.$lodash.orderBy(confirmReg, function (item) { // 根据 匹配的name的长度排序 避免匹配的 $a 没匹配 $asset的问题
|
|
return item.name.length
|
|
}, 'desc')
|
|
if (confirmReg.length) {
|
|
confirmReg.forEach(item => {
|
|
const reg = new RegExp('\\$' + item.name, 'g') // 后续需要考虑 item,name 使用特殊字符的问题
|
|
str = str.replace(reg, item.checked.map(label => label.replace(/\\"/g, '"').replace(/\\'/g, "'")).join('+'))
|
|
})
|
|
}
|
|
this.chartInfo.modifiedName = str
|
|
return str
|
|
}
|
|
},
|
|
watch: {
|
|
isError: {
|
|
immediate: true,
|
|
handler (n) {
|
|
if (n) {
|
|
this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|