feat:添加示例

This commit is contained in:
zhangyu
2021-03-25 12:38:29 +08:00
parent 9cfe34be7f
commit a95e7638bb
12 changed files with 220 additions and 33 deletions

View File

@@ -254,7 +254,6 @@ export default {
if (!this.scrollbarWrap) { if (!this.scrollbarWrap) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
console.info(this.scrollbarWrap)
this.toTopBtnHandler(this.scrollbarWrap) this.toTopBtnHandler(this.scrollbarWrap)
}) })
} }

View File

@@ -91,7 +91,6 @@ export default {
} }
/// monitor /// monitor
const url = baseUrl + '/terminal/monitor.ws?' + '&token=' + token + '&uuid=' + this.obj.uuid const url = baseUrl + '/terminal/monitor.ws?' + '&token=' + token + '&uuid=' + this.obj.uuid
console.info(url)
if (this.terminalSocket) { // 如果存在之前的链接 先断开 再链接新的 if (this.terminalSocket) { // 如果存在之前的链接 先断开 再链接新的
this.terminalSocket.close() this.terminalSocket.close()
} }

View File

@@ -2,7 +2,7 @@ import { getChart } from './common'
import MessageBox from 'element-ui/packages/message-box/src/main' import MessageBox from 'element-ui/packages/message-box/src/main'
import i18n from '../i18n' 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 = { export const clickoutside = {
// 初始化指令 // 初始化指令
bind (el, binding, vnode) { bind (el, binding, vnode) {

View File

@@ -958,7 +958,19 @@ const cn = {
integer: '整数', integer: '整数',
double: '小数', double: '小数',
datetime: '日期', datetime: '日期',
email: '邮箱' email: '邮箱',
option: '选项',
isCheck: '是否默认选择',
operate: '操作',
default: '默认',
dateType: '日期类型',
date: '日期',
time: '时间',
datetimes: '时间+时间',
interval: '区间',
decimals: '精度',
moreOptionsError: '选项最多20条',
onlyOptionError: '至少需要一个选项'
}, },
exprTemp: { exprTemp: {
exprTemp: 'expression模板', exprTemp: 'expression模板',

View File

@@ -961,7 +961,19 @@ const en = {
integer: 'INTEGER', integer: 'INTEGER',
double: 'DOUBLE', double: 'DOUBLE',
datetime: 'DATETIME', 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: {
exprTemp: 'Expression template', exprTemp: 'Expression template',

View File

@@ -305,7 +305,6 @@ export function myCubeAnchors (node) { // 立方体锚点
/* 自定义立方体 */ /* 自定义立方体 */
export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) { export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
console.log(node)
node.animateType = animateType node.animateType = animateType
if (node.animateType === 'custom') { if (node.animateType === 'custom') {
return return

View File

@@ -75,13 +75,13 @@
<div v-if="editAssetMeta.type==='radio' || editAssetMeta.type==='checkbox' || editAssetMeta.type==='select'" class="meta-option-box"> <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-row class="asset-meta-param-row asset-meta-param-header">
<el-col :span="12"> <el-col :span="12">
选项 {{$t('config.assetMeta.option')}}
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
是否默认 {{$t('config.assetMeta.isCheck')}}
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
操作 {{$t('config.assetMeta.operate')}}
</el-col> </el-col>
</el-row> </el-row>
<el-row v-for="(item,index) in editAssetMeta.param.items" :key="index" class="asset-meta-param-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-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>
<el-col :span="6"> <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>
<el-col :span="6"> <el-col :span="6">
@@ -109,15 +109,15 @@
<div v-if="editAssetMeta.type==='datetime'"> <div v-if="editAssetMeta.type==='datetime'">
<el-row style="margin-bottom: 10px"> <el-row style="margin-bottom: 10px">
<span class="datetime-header">日期类型: </span> <span class="datetime-header">{{$t('config.assetMeta.dateType')}}: </span>
<el-radio-group v-model="editAssetMeta.param.subType" @change="()=>{console.log(editAssetMeta.param.subType)}"> <el-radio-group v-model="editAssetMeta.param.subType">
<el-radio :label="'date'">日期</el-radio> <el-radio :label="'date'">{{$t('config.assetMeta.date')}}</el-radio>
<el-radio :label="'time'">时间</el-radio> <el-radio :label="'time'">{{$t('config.assetMeta.time')}}</el-radio>
<el-radio :label="'dateTime'">日期+时间</el-radio> <el-radio :label="'datetime'">{{$t('config.assetMeta.datetimes')}}</el-radio>
</el-radio-group> </el-radio-group>
</el-row> </el-row>
<el-row> <el-row>
<span class="datetime-header">是否区间: </span> <span class="datetime-header">{{$t('config.assetMeta.interval')}}: </span>
<el-switch <el-switch
v-model="editAssetMeta.param.interval" v-model="editAssetMeta.param.interval"
@change="$forceUpdate" @change="$forceUpdate"
@@ -126,6 +126,12 @@
</el-row> </el-row>
</div> </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>
<el-form-item :label='$t("overall.remark")' prop="remark"> <el-form-item :label='$t("overall.remark")' prop="remark">
@@ -133,6 +139,7 @@
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.assetMeta.example")'> <el-form-item :label='$t("config.assetMeta.example")'>
<assetTagEx :type="editAssetMeta.type" :param="editAssetMeta.param"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -155,12 +162,13 @@
</template> </template>
<script> <script>
import assetTagEx from '../../page/asset/components/assetTagEx'
export default { export default {
name: 'assetMetaBox', name: 'assetMetaBox',
props: { props: {
assetMeta: {} assetMeta: {}
}, },
components: {}, components: { assetTagEx },
data () { data () {
return { return {
editAssetMeta: { editAssetMeta: {
@@ -321,12 +329,10 @@ export default {
this.$get('asset/field/group', { pageSize: -1 }).then(response => { this.$get('asset/field/group', { pageSize: -1 }).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.groupData = response.data.list this.groupData = response.data.list
console.log(this.groupData)
} }
}) })
}, },
selectType (val, init) { selectType (val, init) {
console.log(val)
switch (val) { switch (val) {
case 'radio' : case 'radio' :
case 'checkbox' : case 'checkbox' :
@@ -350,6 +356,13 @@ export default {
interval: false interval: false
} }
break break
case 'double' :
this.showParam = true
if (init) return
this.editAssetMeta.param = {
decimals: 2
}
break
default: default:
this.showParam = false this.showParam = false
break break
@@ -361,7 +374,6 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
radioChange (i) { radioChange (i) {
console.log(i)
this.editAssetMeta.param.items.forEach((item, index) => { this.editAssetMeta.param.items.forEach((item, index) => {
if (index === i) { if (index === i) {
item.check = !!item.check item.check = !!item.check
@@ -375,8 +387,8 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
addParam () { addParam () {
if (this.editAssetMeta.param.items.length > 20) { if (this.editAssetMeta.param.items.length >= 20) {
this.$message.error('选项最多20条') this.$message.error(this.$t('config.assetMeta.moreOptionsError'))
return return
} }
this.editAssetMeta.param.items.push({ this.editAssetMeta.param.items.push({
@@ -386,8 +398,8 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
deleteParam (index) { deleteParam (index) {
if (this.editAssetMeta.param.items.length > 20) { if (this.editAssetMeta.param.items.length === 1) {
this.$message.error('至少需要一个选项') this.$message.error(this.$t('config.assetMeta.onlyOptionError'))
return return
} }
this.editAssetMeta.param.items.splice(index, 1) this.editAssetMeta.param.items.splice(index, 1)

View File

@@ -354,7 +354,6 @@ export default {
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
this.nowTime = this.utcTimeToTimezoneStr(response.time) this.nowTime = this.utcTimeToTimezoneStr(response.time)
console.info(this.$refs.alertSilenceTable)
if (!this.scrollbarWrap) { if (!this.scrollbarWrap) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.alertSilenceTable.bodyWrapper this.scrollbarWrap = this.$refs.alertSilenceTable.bodyWrapper

View File

@@ -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>

View File

@@ -352,7 +352,6 @@ export default {
this.tools.loading = false this.tools.loading = false
if (response.code == 200) { if (response.code == 200) {
this.groupData[0].children = response.data.list this.groupData[0].children = response.data.list
console.log(this.groupData)
this.$forceUpdate() this.$forceUpdate()
} }
}) })
@@ -423,18 +422,15 @@ export default {
this.getAssetMeta() this.getAssetMeta()
}, },
addGroup () { addGroup () {
console.log(123123123123)
this.metaGroup = JSON.parse(JSON.stringify(this.blackMetaGroup)) this.metaGroup = JSON.parse(JSON.stringify(this.blackMetaGroup))
this.rightBox.groupShow = true this.rightBox.groupShow = true
}, },
editGroup (group) { editGroup (group) {
console.log(group)
this.metaGroup = JSON.parse(JSON.stringify(group)) this.metaGroup = JSON.parse(JSON.stringify(group))
this.rightBox.groupShow = true this.rightBox.groupShow = true
}, },
delGroup (group) { delGroup (group) {
const selectKey = this.$refs.groupTree.getCurrentKey() const selectKey = this.$refs.groupTree.getCurrentKey()
console.log(selectKey)
if (this.prevent_opt.save) { if (this.prevent_opt.save) {
return return
} }

View File

@@ -312,7 +312,6 @@ export default {
this.tableData = response.data.list this.tableData = response.data.list
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
this.nowTime = this.utcTimeToTimezoneStr(response.time) this.nowTime = this.utcTimeToTimezoneStr(response.time)
console.info(this.$refs.exprTempTable)
if (!this.scrollbarWrap) { if (!this.scrollbarWrap) {
this.$nextTick(() => { this.$nextTick(() => {
this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper

View File

@@ -178,7 +178,6 @@ export default {
if (this.option.series instanceof Array) { if (this.option.series instanceof Array) {
this.option.series = this.option.series.filter((item, index) => index < this.dataSize) this.option.series = this.option.series.filter((item, index) => index < this.dataSize)
} }
console.log('option', this.option)
this.chart.setOption(this.option) this.chart.setOption(this.option)
} else { } else {
this.noData = true this.noData = true