fix: 细节优化修改

This commit is contained in:
@changcode
2021-04-30 17:02:43 +08:00
parent 23804aa62a
commit ceef9ba5dc
10 changed files with 47 additions and 34 deletions

View File

@@ -5,7 +5,7 @@
"author": "", "author": "",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "node --max-old-space-size=6000 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js", "dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev", "start": "npm run dev",
"build": "node build/build.js", "build": "node build/build.js",
"lint": "eslint --fix --ext .js,.vue src" "lint": "eslint --fix --ext .js,.vue src"

View File

@@ -20,6 +20,7 @@
<div class="sub-list__tabs"> <div class="sub-list__tabs">
<!--机柜--> <!--机柜-->
<cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab> <cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
<alertMessageTabNew v-if="from === fromRoute.dc && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.dc.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<!--告警信息--> <!--告警信息-->
<alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab> <alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
<!--asset页的endpoint列表--> <!--asset页的endpoint列表-->
@@ -172,11 +173,18 @@ export default {
dc: { dc: {
cabinet: [ cabinet: [
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true }, { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
{ prop: 'asset', name: this.$t('asset.assets'), active: false } { prop: 'asset', name: this.$t('asset.assets'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
], ],
asset: [ asset: [
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false }, { prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
{ prop: 'asset', name: this.$t('asset.assets'), active: true } { prop: 'asset', name: this.$t('asset.assets'), active: true },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
],
alertMessage: [
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
] ]
} }

View File

@@ -210,7 +210,7 @@ const en = {
panelId: 'ID' // ID panelId: 'ID' // ID
}, },
// 图表-侧滑框 // 图表-侧滑框
createChartTitle: 'New chart', // "新增图表" createChartTitle: 'New Chart Template', // "新增图表"
editChartTitle: 'Edit', // "编辑图表" editChartTitle: 'Edit', // "编辑图表"
chartForm: { chartForm: {
chartId: 'ID', chartId: 'ID',
@@ -677,6 +677,7 @@ const en = {
type: 'Type', // "类别" type: 'Type', // "类别"
checkTime: 'Check time', checkTime: 'Check time',
dataCenter: 'Data center', dataCenter: 'Data center',
name : 'Name',
agent: { agent: {
agent: 'Agent', agent: 'Agent',
title: 'Download agent', title: 'Download agent',

View File

@@ -2,7 +2,7 @@
<div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom"> <div v-clickoutside="{obj:editPromServer,func:clickOutside}" class="right-box right-box-prom">
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box__header"> <div class="right-box__header">
<div class="header__title">{{editPromServer.id ? ($t("config.promServer.editProm") + " ID" + editPromServer.id) : $t("config.promServer.createProm")}}</div> <div class="header__title">{{editPromServer.id ? ($t("config.agent.editProm") + " ID" + editPromServer.id) : $t("config.agent.createProm")}}</div>
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: editPromServer, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: editPromServer, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div> </div>
@@ -11,9 +11,9 @@
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box__container"> <div class="right-box__container">
<div class="container__form"> <div class="container__form">
<el-form ref="promServerForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px"> <el-form ref="agentForm" :model="editPromServer" :rules="rules" label-position = "top" label-width="120px">
<!--DC--> <!--DC-->
<el-form-item :label="$t('config.dc.dc')" prop="dc.name"> <el-form-item :label="$t('config.agent.name')" prop="name">
<div class="right-box-form-content"> <div class="right-box-form-content">
<el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item"> <el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
@@ -32,14 +32,14 @@
<el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input> <el-input id="prom-box-input-port" v-model.number="editPromServer.port" placeholder="" size="small" type="text"></el-input>
</el-form-item> </el-form-item>
<!--type--> <!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type"> <el-form-item :label="$t('config.agent.type')" prop="type">
<!-- <el-cascader--> <!-- <el-cascader-->
<!-- id="prom-box-input-type"--> <!-- id="prom-box-input-type"-->
<!-- style="width: 100%"--> <!-- style="width: 100%"-->
<!-- v-model="editPromServer.type"--> <!-- v-model="editPromServer.type"-->
<!-- placeholder=""--> <!-- placeholder=""-->
<!-- size="small"--> <!-- size="small"-->
<!-- :options="$CONSTANTS.promServer.theData"--> <!-- :options="$CONSTANTS.agent.theData"-->
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"--> <!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
<!-- clearable></el-cascader>--> <!-- clearable></el-cascader>-->
<el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value"> <el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="value">
@@ -77,7 +77,7 @@ import { agent2 } from '@/components/common/js/constants'
export default { export default {
name: 'agentBox', name: 'agentBox',
props: { props: {
promServer: Object agent: Object
}, },
data () { data () {
return { return {
@@ -127,11 +127,11 @@ export default {
}, },
/* 保存 */ /* 保存 */
save () { save () {
this.$refs.promServerForm.validate(valid => { this.$refs.agentForm.validate(valid => {
if (valid) { if (valid) {
this.prevent_opt.save = true this.prevent_opt.save = true
if (this.editPromServer.id) { if (this.editPromServer.id) {
this.$put('promServer', this.editPromServer).then(response => { this.$put('agent', this.editPromServer).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true) this.esc(true)
@@ -141,7 +141,7 @@ export default {
this.prevent_opt.save = false this.prevent_opt.save = false
}) })
} else { } else {
this.$post('promServer', this.editPromServer).then(response => { this.$post('agent', this.editPromServer).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true) this.esc(true)
@@ -163,7 +163,7 @@ export default {
cancelButtonText: this.$t('tip.no'), cancelButtonText: this.$t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete('promServer?ids=' + this.editPromServer.id).then(response => { this.$delete('agent?ids=' + this.editPromServer.id).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') }) this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.esc(true) this.esc(true)
@@ -184,7 +184,7 @@ export default {
}, },
watch: { watch: {
// 将prop里的user转为组件内部对象 // 将prop里的user转为组件内部对象
promServer: { agent: {
immediate: true, immediate: true,
deep: true, deep: true,
handler (n) { handler (n) {

View File

@@ -30,20 +30,20 @@
@change="switchSearch" @change="switchSearch"
v-model="editAssetMeta.search" v-model="editAssetMeta.search"
active-color="#ee9d3f" active-color="#ee9d3f"
:active-value="1" active-value="1"
:inactive-value="0"> inactive-value="0">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.assetLabel.display")' prop="display"> <el-form-item :label='$t("config.assetLabel.display")' prop="display">
<el-switch <el-switch
v-model="editAssetMeta.display" v-model="editAssetMeta.display"
active-color="#ee9d3f" active-color="#ee9d3f"
:active-value="1" active-value="1"
:inactive-value="0"> inactive-value="0">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.assetLabel.type")' prop="type"> <el-form-item :label='$t("config.assetLabel.type")' prop="type">
<el-select v-model="editAssetMeta.type" size="small" class="right-box__select" placeholder='请选择' popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @change="selectType"> <el-select v-model="editAssetMeta.type" size="small" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false" @change="selectType">
<el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled"> <el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
<div><i :class="item.icon"></i>&nbsp;&nbsp;<span >{{item.name}}</span></div> <div><i :class="item.icon"></i>&nbsp;&nbsp;<span >{{item.name}}</span></div>
</el-option> </el-option>
@@ -160,8 +160,8 @@ export default {
id: '', id: '',
name: '' name: ''
}, },
search: 1, search: '0',
display: 1, display: '0',
type: '', type: '',
param: {}, param: {},
remark: '' remark: ''
@@ -246,21 +246,23 @@ export default {
assetLabel: { assetLabel: {
immediate: true, immediate: true,
handler (n) { handler (n) {
this.editAssetMeta = { ...n } this.editAssetMeta = { ...n, search: `${n.search}`, display: `${n.display}` }
this.selectType(n.type, true) this.selectType(n.type, true)
} }
} }
}, },
mounted () { mounted () {
this.getGroupData() this.getGroupData()
this.switchSearch() this.switchSearch('0')
}, },
methods: { methods: {
switchSearch(value){ switchSearch(value){
this.typeData.forEach(element => { this.typeData.forEach(element => {
if( value === 0 ) { if( value == 0 ) {
element.disabled = false element.disabled = false
}else { console.log(value);
}else if(value == 1) {
console.log(value);
if(element.value == 'radio'){ if(element.value == 'radio'){
element.disabled = false element.disabled = false
}else if(element.value == 'checkbox'){ }else if(element.value == 'checkbox'){
@@ -268,6 +270,8 @@ export default {
}else if(element.value == 'select'){ }else if(element.value == 'select'){
element.disabled = false element.disabled = false
} }
}else {
return console.log('不为0也不为1');
} }
}) })
}, },

View File

@@ -113,7 +113,7 @@ export default {
cancelButtonText: this.$t('tip.no'), cancelButtonText: this.$t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => { this.$delete('dc/cabinet?ids=' + this.editCabinet.id).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code == 200) { if (response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })

View File

@@ -105,7 +105,7 @@ export default {
cancelButtonText: this.$t('tip.no'), cancelButtonText: this.$t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response => { this.$delete('dc/cabinet?ids=' + this.editCabinet.id).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code == 200) { if (response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })

View File

@@ -86,7 +86,7 @@ export default {
show: true, show: true,
width: 80 width: 80
}, { }, {
label: this.$t('config.dc.dc'), label: this.$t('config.agent.name'),
prop: 'dc', prop: 'dc',
show: true show: true
}, { }, {

View File

@@ -61,12 +61,12 @@
</template> </template>
<template v-else-if="item.prop === 'assetNum'"> <template v-else-if="item.prop === 'assetNum'">
<span class="endpoint-num" @click="showBottomBox('asset', scope.row)"> <span class="endpoint-num" @click="showBottomBox('asset', scope.row)">
<i class="nz-icon nz-icon-overview-project" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/> <i class="nz-icon nz-icon-overview-project monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'color23BF9A'"/>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
</template> </template>
<template v-else-if="item.prop === 'alertNum'"> <template v-else-if="item.prop === 'alertNum'">
<span class="alert-num" @click="showBottomBox('moduleAlertMessage', scope.row)"> <span class="alert-num" @click="showBottomBox('alertMessageTab', scope.row)">
<i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/> <i class="nz-icon nz-icon-overview-alert" :class="scope.row[item.prop]>0?'colorEF7458':'color23BF9A'"/>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
@@ -74,7 +74,7 @@
<template v-else-if="item.prop === 'cabinetNum'"> <template v-else-if="item.prop === 'cabinetNum'">
<span class="alert-num" @click="showBottomBox('cabinet', scope.row)"> <span class="alert-num" @click="showBottomBox('cabinet', scope.row)">
<i class="nz-icon nz-icon-cabinet" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/> <i class="nz-icon nz-icon-cabinet monitorColor" :class="scope.row[item.prop]>0?'color23BF9A':'colorEF7458'"/>
{{scope.row[item.prop]}} {{scope.row[item.prop]}}
</span> </span>
</template> </template>

View File

@@ -128,8 +128,8 @@ export default {
name: '', name: '',
metaKey: '', metaKey: '',
groupId: '', groupId: '',
search: 1, search: '0',
display: 1, display: '0',
type: 'text', type: 'text',
param: {}, param: {},
remark: '' remark: ''