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

feat： project重构 （45%）

Browse Source
This commit is contained in:
zhangyu
2023-02-16 18:13:14 +08:00
parent b4ed631e9b
commit 1330f25970
13 changed files with 484 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
View File

@@ -1,12 +1,390 @@
<template>
<div>
data
<div class="pens-data right-box__container">
<div class="form-row-box chart-config">
<div class="form-row-item">
<div class="form-row-key">
Time Range
</div>
<div class="form-row-value">
<el-select v-model="dataTimeType"/>
</div>
</div>
<div class="form-row-item form-row-item-full">
<div
v-if="elements && elements.length"
class="metrics-input-box"
>
<draggable
v-model="elements"
:move="move"
@end="end"
@start="start"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-chart-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<el-row
class="element-item form-row-item form-row-item-full thresholds-from-item"
style="margin-bottom: 10px !important"
v-for="index of elements.length"
:key="index"
>
<div class="chart-title chart-title-config">
<span class="chart-title-content el-form-item" :class="{
'is-error' : expressionsShow[index-1].error,
'hide-input': expressionsShow[index-1].hideInput
}">
<i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1].show?'':'is-active'" @click.stop="showExpression(index)"></i>
<el-input
style="width: 120px"
@mousedown.stop
v-model="expressionName[index-1]"
size="small"
@input="(val)=>{expressionNameInput(val,index-1)}"
@change="expressionNameChange(index-1)"
@focus.stop="showInput(index-1,false)"
@blur="showInput(index-1,true)"
/>
<div v-if="expressionsShow[index-1].error" class="el-form-item__error" style="top: 10px;left: 164px"> {{expressionsShow[index-1].error}}</div>
</span>
<span>
<!-- 显示隐藏 -->
<span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
<i class="nz-icon nz-icon-mimakejian"></i>
</span>
<span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
<i class="nz-icon nz-icon-mimabukejian"></i>
</span>
<span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
<i class="nz-icon nz-icon-override"></i>
</span>
<span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition name="el-zoom-in-top">
<el-row v-show="expressionsShow[index-1].show">
<div :prop="'elements.' + (index -1) + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}">
<promql-input
:from-father-data="true"
:metricOptionsParent="metricOptions"
:expressionList="expressions"
:id="'promqlKeys' + [index-1]"
:index="index-1"
:required = 'true'
:type="promqlType"
:key="index-1"
:plugins="['metric-selector', 'metric-input', 'remove']"
:ref="'promql-'+(index-1)"
:showRemove="false"
:styleType="2"
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
</div>
<el-row style="margin-top: 18px;display: flex">
<el-col class="legend-title">
<span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
<div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
<!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div> -->
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</el-col>
<el-col style="flex: 1">
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
</el-col>
</el-row>
</el-row>
</transition>
</el-row>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import promqlInputMixin from '@/components/common/mixin/promqlInput.js'
import {isStat} from "@/components/chart/chart/tools";
import {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
import {getUUID, resetZIndex} from "@/components/common/js/common";
import lodash from "lodash";
import draggable from 'vuedraggable'
const rz = {
methods: {
rz (e) {
resetZIndex(e)
}
}
}
export default {
name: 'meta2dData'
name: 'meta2dData',
mixins: [promqlInputMixin, rz],
components: {
draggable,
promqlInput
},
data () {
return {
language: localStorage.getItem('nz-language') || 'en',
elements: [],
promqlType: 'metrics',
expressions: [],
expressionName: [],
expressionsShow: [],
letter: [
'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
],
dataTimeType: 1
}
},
mounted () {
this.init()
},
methods: {
expressionChange: function () {
if (this.expressions.length) {
this.elements = []
this.expressions.forEach((expr, i) => {
this.elements.push({
id: this.expressionsShow[i].elementId,
expression: expr,
type: 'expert',
legend: this.expressionsShow[i].legend,
name: this.expressionName[i],
state: this.expressionsShow[i].state,
orderNum: i
})
})
} else {
this.elements = []
}
this.change()
},
switchExpression (index, flag) {
if (flag === 1) {
this.$set(this.expressionsShow[index], 'state', 0)
} else {
this.$set(this.expressionsShow[index], 'state', 1)
}
this.expressionChange()
},
expressionNameChange (index) {
if (this.expressionsShow[index].error) {
this.expressionName[index] = this.expressionsShow[index].oldName
this.expressionsShow[index].error = ''
} else if (!this.expressionName[index]) {
this.expressionName[index] = this.expressionsShow[index].oldName
} else {
this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((item, index) => {
if (item == this.expressionsShow[index].oldName) {
this.param.rightYAxis.elementNames[index] = this.expressionName[index]
}
})
this.expressionsShow[index].oldName = this.expressionName[index]
}
this.expressionChange()
},
expressionNameInput (val, index) {
const findIndex = this.expressionName.indexOf(val)
const lastIndex = this.expressionName.lastIndexOf(val)
if (findIndex !== -1 && lastIndex != -1 && lastIndex !== findIndex) {
this.expressionsShow[index].error = this.$t('error.nameDuplicate')
} else if (!val) {
this.expressionsShow[index].error = this.$t('validate.required')
} else {
this.expressionsShow[index].error = ''
}
},
showInput (index, flag) {
this.expressionsShow[index].hideInput = flag
},
transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
const self = this
let letter = ''
const loopNum = parseInt(num / 26)
if (loopNum > 0) {
letter += this.transformNumToLetter(loopNum - 1)
}
letter += self.letter[num % 26]
return letter
},
getExpressionName () {
let name = ''
for (let i = 0; i <= this.expressionName.length; i++) {
name = this.transformNumToLetter(i)
if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
break
}
}
return name
},
addExpression (item) {
if (!item) {
this.expressions.push('')
const expressionName = this.getExpressionName()
this.expressionName.push(expressionName)
this.expressionsShow.push({
show: true,
hideInput: true,
oldName: expressionName,
error: '',
legend: '',
elementId: '',
state: 1
})
this.expressionChange()
} else {
this.expressions.push(item.expression)
this.expressionName.push(item.name)
this.expressionsShow.push({
show: true,
hideInput: true,
oldName: item.name,
error: '',
elementId: item.id,
legend: item.legend,
state: item.state
})
}
},
copyExpression (index) {
this.expressions.push(this.expressions[index])
const expressionName = this.getExpressionName()
this.expressionName.push(expressionName)
this.expressionsShow.push(
{
...this.expressionsShow[index],
show: true,
hideInput: true,
oldName: expressionName,
error: '',
elementId: ''
}
)
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
this.$refs[`promql-${index}`][0].metricChange(ex)
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
})
})
this.expressionChange()
},
removeExpression (index) {
if (this.expressionsShow.length > 1) {
this.param.rightYAxis && this.param.rightYAxis.elementNames.forEach((elementName, subIndex) => {
if (elementName == this.expressionName[index]) {
this.param.rightYAxis.elementNames.splice(subIndex, 1)
}
})
this.expressions.splice(index, 1)
this.expressionName.splice(index, 1)
this.expressionsShow.splice(index, 1)
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
this.$refs[`promql-${index}`][0].metricChange(ex)
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
})
})
this.expressionChange()
}
},
showExpression (index) {
this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
},
unitSelected: function (value) {
// this.unit=value[value.length-1];
this.change()
},
change (key, index) {
this.$nextTick(() => {
if (key) {
this.hideError(key, index)
}
this.$emit('change', this)
})
},
showError () {
},
hideError (key, index) {
if (!this.param[key] || !this.param[key].length) {
return
}
this.param[key][index].error = false
this.$forceUpdate()
},
move () {
},
end (event) {
this.expressions = []
this.expressionName = []
if (!this.elements.length) {
this.addExpression()
} else {
const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow)
this.elements.forEach((item, index) => {
this.expressions.push(item.expression)
this.expressionName.push(item.name)
// 更新promqlInput视图
this.$nextTick(() => {
this.$refs[`promql-${index}`][0].promqlInputChange(item)
})
// 设置orderNum排序
item.orderNum = index
// expressionsShow调整顺序
expressionsShow.forEach((subItem) => {
if (item.name == subItem.oldName) {
this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem))
}
})
})
}
this.change()
},
start () {
},
init () {
// 重置相关属性
this.expressions = []
this.expressionsShow = []
this.expressionName = []
if (!this.elements.length) {
this.addExpression()
} else {
// 根据orderNum排序
this.elements = this.elements.sort((a, b) => a.orderNum - b.orderNum)
this.elements.forEach(item => {
this.addExpression(item)
})
this.expressionChange()
}
}
}
}
</script>