feat：添加示例
This commit is contained in:
zhangyu
@@ -254,7 +254,6 @@ export default {
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
|
||||
console.info(this.scrollbarWrap)
|
||||
this.toTopBtnHandler(this.scrollbarWrap)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -91,7 +91,6 @@ export default {
|
||||
}
|
||||
/// monitor
|
||||
const url = baseUrl + '/terminal/monitor.ws?' + '&token=' + token + '&uuid=' + this.obj.uuid
|
||||
console.info(url)
|
||||
if (this.terminalSocket) { // 如果存在之前的链接 先断开 再链接新的
|
||||
this.terminalSocket.close()
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { getChart } from './common'
|
||||
import MessageBox from 'element-ui/packages/message-box/src/main'
|
||||
import i18n from '../i18n'
|
||||
/* 弹窗点击外部后关闭 */
|
||||
const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box'] // clickoutside排除的class(白名单) no-style-class：没有任何样式的class
|
||||
const exceptClassName = ['config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'asset-dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box','el-time-panel'] // clickoutside排除的class(白名单) no-style-class：没有任何样式的class
|
||||
export const clickoutside = {
|
||||
// 初始化指令
|
||||
bind (el, binding, vnode) {
|
||||
|
||||
@@ -958,7 +958,19 @@ const cn = {
|
||||
integer: '整数',
|
||||
double: '小数',
|
||||
datetime: '日期',
|
||||
email: '邮箱'
|
||||
email: '邮箱',
|
||||
option: '选项',
|
||||
isCheck: '是否默认选择',
|
||||
operate: '操作',
|
||||
default: '默认',
|
||||
dateType: '日期类型',
|
||||
date: '日期',
|
||||
time: '时间',
|
||||
datetimes: '时间+时间',
|
||||
interval: '区间',
|
||||
decimals: '精度',
|
||||
moreOptionsError: '选项最多20条',
|
||||
onlyOptionError: '至少需要一个选项'
|
||||
},
|
||||
exprTemp: {
|
||||
exprTemp: 'expression模板',
|
||||
|
||||
@@ -961,7 +961,19 @@ const en = {
|
||||
integer: 'INTEGER',
|
||||
double: 'DOUBLE',
|
||||
datetime: 'DATETIME',
|
||||
email: 'EMAIL'
|
||||
email: 'EMAIL',
|
||||
option: 'Options',
|
||||
isCheck: 'Is check',
|
||||
operate: 'Operate',
|
||||
default: 'Default',
|
||||
dateType: 'Date type',
|
||||
date: 'Date',
|
||||
time: 'Time',
|
||||
datetimes: 'Date + Time',
|
||||
interval: 'Interval',
|
||||
decimals: 'Decimals',
|
||||
moreOptionsError: 'There are up to 20 options',
|
||||
onlyOptionError: 'You need at least one option'
|
||||
},
|
||||
exprTemp: {
|
||||
exprTemp: 'Expression template',
|
||||
|
||||
@@ -305,7 +305,6 @@ export function myCubeAnchors (node) { // 立方体锚点
|
||||
/* 自定义立方体 */
|
||||
|
||||
export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
|
||||
console.log(node)
|
||||
node.animateType = animateType
|
||||
if (node.animateType === 'custom') {
|
||||
return
|
||||
|
||||
@@ -75,13 +75,13 @@
|
||||
<div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box">
|
||||
<el-row class="asset-meta-param-row asset-meta-param-header">
|
||||
<el-col :span="12">
|
||||
选项
|
||||
{{$t('config.assetMeta.option')}}
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
是否默认
|
||||
{{$t('config.assetMeta.isCheck')}}
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
操作
|
||||
{{$t('config.assetMeta.operate')}}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-row">
|
||||
@@ -89,9 +89,9 @@
|
||||
<el-input v-model = "item.name" size="small" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" @input="(val)=>{inputChange(index, val)}" :ref="'metaNameOption'+index"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">默认</el-radio>
|
||||
<el-radio v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='select'" v-model = "item.check" :label="true" @change="radioChange(index)">{{$t('config.assetMeta.default')}}</el-radio>
|
||||
|
||||
<el-checkbox v-else v-model="item.check" @change="checkBoxChange">默认</el-checkbox>
|
||||
<el-checkbox v-else v-model="item.check" @change="checkBoxChange"> {{$t('config.assetMeta.default')}}</el-checkbox>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
@@ -109,15 +109,15 @@
|
||||
|
||||
<div v-if="editAssetMeta.type==='datetime'">
|
||||
<el-row style="margin-bottom: 10px">
|
||||
<span class="datetime-header">日期类型: </span>
|
||||
<el-radio-group v-model="editAssetMeta.param.subType" @change="()=>{console.log(editAssetMeta.param.subType)}">
|
||||
<el-radio :label="'date'">日期</el-radio>
|
||||
<el-radio :label="'time'">时间</el-radio>
|
||||
<el-radio :label="'dateTime'">日期+时间</el-radio>
|
||||
<span class="datetime-header">{{$t('config.assetMeta.dateType')}}: </span>
|
||||
<el-radio-group v-model="editAssetMeta.param.subType">
|
||||
<el-radio :label="'date'">{{$t('config.assetMeta.date')}}</el-radio>
|
||||
<el-radio :label="'time'">{{$t('config.assetMeta.time')}}</el-radio>
|
||||
<el-radio :label="'datetime'">{{$t('config.assetMeta.datetimes')}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<span class="datetime-header">是否区间: </span>
|
||||
<span class="datetime-header">{{$t('config.assetMeta.interval')}}: </span>
|
||||
<el-switch
|
||||
v-model="editAssetMeta.param.interval"
|
||||
@change="$forceUpdate"
|
||||
@@ -126,6 +126,12 @@
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div v-if="editAssetMeta.type==='double'">
|
||||
<el-row>
|
||||
<span class="datetime-header">{{$t('config.assetMeta.decimals')}}: </span>
|
||||
<el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label='$t("overall.remark")' prop="remark">
|
||||
@@ -133,6 +139,7 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label='$t("config.assetMeta.example")'>
|
||||
<assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
@@ -155,12 +162,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import assetTagEx from '../../page/asset/components/assetTagEx'
|
||||
export default {
|
||||
name: 'assetMetaBox',
|
||||
props: {
|
||||
assetMeta: {}
|
||||
},
|
||||
components: {},
|
||||
components: { assetTagEx },
|
||||
data () {
|
||||
return {
|
||||
editAssetMeta: {
|
||||
@@ -261,7 +269,7 @@ export default {
|
||||
this.$refs.editAssetMetaForm.validate((valid) => {
|
||||
if (valid) {
|
||||
const param = { ...this.editAssetMeta }
|
||||
if (param.type !== 'radio' && param.type !== 'checkbox' && param.type !== 'select' && param.type !== 'datetime'){
|
||||
if (param.type !== 'radio' && param.type !== 'checkbox' && param.type !== 'select' && param.type !== 'datetime') {
|
||||
delete param.param
|
||||
} else {
|
||||
param.param = JSON.stringify(param.param)
|
||||
@@ -321,12 +329,10 @@ export default {
|
||||
this.$get('asset/field/group', { pageSize: -1 }).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.groupData = response.data.list
|
||||
console.log(this.groupData)
|
||||
}
|
||||
})
|
||||
},
|
||||
selectType (val, init) {
|
||||
console.log(val)
|
||||
switch (val) {
|
||||
case 'radio' :
|
||||
case 'checkbox' :
|
||||
@@ -350,6 +356,13 @@ export default {
|
||||
interval: false
|
||||
}
|
||||
break
|
||||
case 'double' :
|
||||
this.showParam = true
|
||||
if (init) return
|
||||
this.editAssetMeta.param = {
|
||||
decimals: 2
|
||||
}
|
||||
break
|
||||
default:
|
||||
this.showParam = false
|
||||
break
|
||||
@@ -361,7 +374,6 @@ export default {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
radioChange (i) {
|
||||
console.log(i)
|
||||
this.editAssetMeta.param.items.forEach((item, index) => {
|
||||
if (index === i) {
|
||||
item.check = !!item.check
|
||||
@@ -375,8 +387,8 @@ export default {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
addParam () {
|
||||
if (this.editAssetMeta.param.items.length > 20) {
|
||||
this.$message.error('选项最多20条')
|
||||
if (this.editAssetMeta.param.items.length >= 20) {
|
||||
this.$message.error(this.$t('config.assetMeta.moreOptionsError'))
|
||||
return
|
||||
}
|
||||
this.editAssetMeta.param.items.push({
|
||||
@@ -386,8 +398,8 @@ export default {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
deleteParam (index) {
|
||||
if (this.editAssetMeta.param.items.length > 20) {
|
||||
this.$message.error('至少需要一个选项')
|
||||
if (this.editAssetMeta.param.items.length === 1) {
|
||||
this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
|
||||
return
|
||||
}
|
||||
this.editAssetMeta.param.items.splice(index, 1)
|
||||
|
||||
@@ -354,7 +354,6 @@ export default {
|
||||
this.tableData = response.data.list
|
||||
this.pageObj.total = response.data.total
|
||||
this.nowTime = this.utcTimeToTimezoneStr(response.time)
|
||||
console.info(this.$refs.alertSilenceTable)
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.alertSilenceTable.bodyWrapper
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="type==='text'">
|
||||
<el-input size="small" maxlength="128"/>
|
||||
</div>
|
||||
<div v-else-if="type==='multitext'">
|
||||
<el-row v-for="(item, index) in inputArr" :key="index" style="margin-bottom: 10px">
|
||||
<el-col :span="20"><el-input v-model="item.value" size="small" maxlength="128"/></el-col>
|
||||
<el-col :span="2" style="text-align: center">
|
||||
<span class="nz-icon-minus-medium">
|
||||
<i @click="deleteInput(index)" class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center">
|
||||
<span v-if=" index=== inputArr.length-1" @click="addInput" style="display: inline-block;">
|
||||
<span class="create-square-box">
|
||||
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
|
||||
</span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-else-if="type==='textarea'">
|
||||
<el-input size="small" type="textarea" maxlength="512" :autosize="{ minRows: 2, maxRows: 4}"/>
|
||||
</div>
|
||||
<div v-else-if="type==='radio'">
|
||||
<el-radio-group v-model="optionValue" >
|
||||
<el-radio v-for="(item,index) in option.items" :label="item.name" :key="index">{{item.name}}</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-else-if="type==='checkbox'">
|
||||
<el-checkbox-group v-model="checkOption" >
|
||||
<el-checkbox v-for="(item,index) in option.items" :label="item.name" :key="index">{{item.name}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div v-else-if="type==='select'">
|
||||
<el-select v-model="optionValue" :popper-append-to-body="false" size="small">
|
||||
<el-option v-for="(item,index) in option.items" :label="item.name" :value="item.name" :key="index"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div v-else-if="type==='integer'">
|
||||
<el-input-number size="small" maxlength="64" :controls="false"></el-input-number>
|
||||
</div>
|
||||
<div v-else-if="type==='double'">
|
||||
<el-input-number size="small" :precision="param.decimals" :controls="false"></el-input-number>
|
||||
</div>
|
||||
<div v-else-if="type==='datetime'">
|
||||
<div v-if="param.subType==='date'">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
:type="param.interval?'daterange':'date'"
|
||||
:range-separator="$t('dashboard.panel.to')"
|
||||
:placeholder="$t('alert.silence.selectTime')"
|
||||
:start-placeholder="$t('dashboard.panel.startTime')"
|
||||
:end-placeholder="$t('dashboard.panel.endTime')"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div v-if="param.subType==='time'">
|
||||
<el-time-picker
|
||||
size="small"
|
||||
:is-range="param.interval"
|
||||
:range-separator="$t('dashboard.panel.to')"
|
||||
:placeholder="$t('alert.silence.selectTime')"
|
||||
:start-placeholder="$t('dashboard.panel.startTime')"
|
||||
:end-placeholder="$t('dashboard.panel.endTime')"
|
||||
>
|
||||
</el-time-picker>
|
||||
</div>
|
||||
<div v-if="param.subType==='datetime'">
|
||||
<el-date-picker
|
||||
size="small"
|
||||
:type="param.interval?'datetimerange':'datetime'"
|
||||
:range-separator="$t('dashboard.panel.to')"
|
||||
:placeholder="$t('alert.silence.selectTime')"
|
||||
:start-placeholder="$t('dashboard.panel.startTime')"
|
||||
:end-placeholder="$t('dashboard.panel.endTime')">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'assetTagEx',
|
||||
props: {
|
||||
type: {},
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
items: [{ name: 'option 1', check: true }, { name: 'option 2', check: false }]
|
||||
}
|
||||
}
|
||||
},
|
||||
param: {
|
||||
type: Object
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
inputArr: [{ value: '' }],
|
||||
optionValue: '',
|
||||
checkOption: [],
|
||||
daterange: [],
|
||||
date: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
option: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
if (this.type === 'radio' || this.type === 'select') {
|
||||
n.items.forEach(item => {
|
||||
if (item.check) {
|
||||
this.optionValue = item.name
|
||||
}
|
||||
})
|
||||
} else if (this.type === 'checkbox') {
|
||||
n.items.forEach(item => {
|
||||
if (item.check) {
|
||||
this.checkOption.push(item.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
param: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (this.type === 'datetime') {
|
||||
// console.log(12312312)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {},
|
||||
methods: {
|
||||
addInput () {
|
||||
this.inputArr.push({ value: '' })
|
||||
},
|
||||
deleteInput (index) {
|
||||
if (this.inputArr.length <= 1) {
|
||||
this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
|
||||
return
|
||||
}
|
||||
this.inputArr.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -352,7 +352,6 @@ export default {
|
||||
this.tools.loading = false
|
||||
if (response.code == 200) {
|
||||
this.groupData[0].children = response.data.list
|
||||
console.log(this.groupData)
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
@@ -423,18 +422,15 @@ export default {
|
||||
this.getAssetMeta()
|
||||
},
|
||||
addGroup () {
|
||||
console.log(123123123123)
|
||||
this.metaGroup = JSON.parse(JSON.stringify(this.blackMetaGroup))
|
||||
this.rightBox.groupShow = true
|
||||
},
|
||||
editGroup (group) {
|
||||
console.log(group)
|
||||
this.metaGroup = JSON.parse(JSON.stringify(group))
|
||||
this.rightBox.groupShow = true
|
||||
},
|
||||
delGroup (group) {
|
||||
const selectKey = this.$refs.groupTree.getCurrentKey()
|
||||
console.log(selectKey)
|
||||
if (this.prevent_opt.save) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -312,7 +312,6 @@ export default {
|
||||
this.tableData = response.data.list
|
||||
this.pageObj.total = response.data.total
|
||||
this.nowTime = this.utcTimeToTimezoneStr(response.time)
|
||||
console.info(this.$refs.exprTempTable)
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper
|
||||
|
||||
@@ -178,7 +178,6 @@ export default {
|
||||
if (this.option.series instanceof Array) {
|
||||
this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
|
||||
}
|
||||
console.log('option', this.option)
|
||||
this.chart.setOption(this.option)
|
||||
} else {
|
||||
this.noData = true
|
||||
|
||||
Reference in New Issue
Block a user