fix: Provider和Applications快捷图表添加标题,以及修改增加提示框名称问题

This commit is contained in:
刘洪洪
2022-10-20 16:13:05 +08:00
parent f9e6250e2a
commit ae8918f7f7
2 changed files with 58 additions and 44 deletions

View File

@@ -1,46 +1,57 @@
.network-overview-apps { .network-overview-apps {
height: 100%; height: 100%;
.line-select-metric { .network-overview-apps-header {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
align-items: center;
&>span { .network-overview-apps-title {
font-size: 12px; font-size: 14px;
color: #575757; color: #353636;
font-weight: 400; font-weight: 600;
margin-right: 3px; height: 32px;
} }
.line-select__operation {
height: 24px; .line-select-metric {
margin-left: 3px; display: flex;
box-shadow: none; justify-content: flex-end;
border-radius: 2px; align-items: center;
.el-input__inner {
width: 100px; &>span {
height: 24px;
padding-left: 4px;
line-height: 24px;
font-size: 12px; font-size: 12px;
color: #2C72C6; color: #575757;
font-weight: 400; font-weight: 400;
margin-right: 3px;
} }
.el-input__suffix { .line-select__operation {
display: flex; height: 24px;
.el-input__suffix-inner { margin-left: 3px;
box-shadow: none;
border-radius: 2px;
.el-input__inner {
width: 100px;
height: 24px;
padding-left: 4px;
line-height: 24px; line-height: 24px;
.el-select__caret { font-size: 12px;
color: #2C72C6;
font-weight: 400;
}
.el-input__suffix {
display: flex;
.el-input__suffix-inner {
line-height: 24px; line-height: 24px;
width: 16px; .el-select__caret {
color: #575757; line-height: 24px;
width: 16px;
color: #575757;
}
} }
} }
} }
} }
} }
.app-cards { .app-cards {
display: grid; display: grid;
grid-template-rows: repeat(auto-fill, 100px); grid-template-rows: repeat(auto-fill, 100px);

View File

@@ -1,20 +1,24 @@
<template> <template>
<div class="network-overview-apps"> <div class="network-overview-apps">
<div class="line-select-metric"> <div class="network-overview-apps-header">
<span>{{$t('network.metric')}}:</span> <div class="network-overview-apps-title">{{$t('networkOverview.appType.providerAndApp')}}</div>
<div class="line-select__operation"> <div class="line-select-metric">
<el-select <span>{{$t('network.metric')}}:</span>
size="mini" <div class="line-select__operation">
v-model="metricFilter" <el-select
placeholder="" size="mini"
popper-class="common-select" v-model="metricFilter"
:popper-append-to-body="false" placeholder=""
@change="metricChange" popper-class="common-select"
> :popper-append-to-body="false"
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> @change="metricChange"
</el-select> >
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div class="app-cards"> <div class="app-cards">
<div class="app-card" v-for="(app, index) in appData" :key="index"> <div class="app-card" v-for="(app, index) in appData" :key="index">
<div class="app-card-title"> <div class="app-card-title">
@@ -219,7 +223,7 @@ export default {
} }
}, },
timeFilter: { timeFilter: {
handler (n) { handler () {
this.init() this.init()
} }
} }
@@ -463,7 +467,6 @@ export default {
}, },
addApp (pageNo, val, show) { addApp (pageNo, val, show) {
this.showAddApp = true this.showAddApp = true
const letter = 'abcdefghijklmnopqrstuvwxyz'
const params = { const params = {
startTime: getSecond(this.timeFilter.startTime), startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime), endTime: getSecond(this.timeFilter.endTime),
@@ -482,7 +485,7 @@ export default {
} else { } else {
params.pageNo = 1 params.pageNo = 1
} }
if (this.appTypeTab == 0) { if (this.appTypeTab === 0) {
params.type = 'overviewProvide' params.type = 'overviewProvide'
get(api.dict, params).then(res => { get(api.dict, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
@@ -507,7 +510,7 @@ export default {
this.loading = false this.loading = false
this.loadingBody = false this.loadingBody = false
}) })
} else if (this.appTypeTab == 1) { } else if (this.appTypeTab === 1) {
params.type = 'overviewApp' params.type = 'overviewApp'
get(api.dict, params).then(res => { get(api.dict, params).then(res => {
res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'app' && pd.name === l.value)) res.data.list = res.data.list.filter(l => !this.appData.some(pd => pd.type === 'app' && pd.name === l.value))
@@ -547,7 +550,7 @@ export default {
cancelApp () { cancelApp () {
this.showAddApp = false this.showAddApp = false
}, },
appTypeTabChange (val) { appTypeTabChange () {
this.pageObj.pageNo = 1 this.pageObj.pageNo = 1
this.searcherApp = '' this.searcherApp = ''
this.addApp() this.addApp()