perf：修改Automatic installation下拉框样式
This commit is contained in:
zyh
@@ -398,6 +398,15 @@
|
||||
.el-select{
|
||||
width: 220px;
|
||||
}
|
||||
.v-selectpage{
|
||||
width: 640px;
|
||||
.sp-base.sp-input{
|
||||
height: 32px;
|
||||
}
|
||||
.sp-icon-close{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nz-btn{
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
@@ -188,7 +188,7 @@ div.v-selectpage div.sp-input-container div.sp-button {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
width: 26px;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-top-right-radius: 0;
|
||||
@@ -201,22 +201,45 @@ div.v-selectpage div.sp-input-container div.sp-button {
|
||||
|
||||
div.v-selectpage div.sp-input-container div.sp-button span.sp-caret {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
margin-left: 2px;
|
||||
transition: transform 0.3s ease;
|
||||
transform: rotate(180deg);
|
||||
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'element-icons' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
div.v-selectpage div.sp-input-container div.sp-button span.sp-caret::before {
|
||||
content: "\e6e1";
|
||||
}
|
||||
|
||||
div.v-selectpage div.sp-input-container div.sp-button span.sp-caret::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 4px dashed;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
div.v-selectpage div.sp-input-container div.sp-button.open span.sp-caret {
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
div.sp-header {
|
||||
|
||||
@@ -8,11 +8,19 @@
|
||||
<h4>{{$t('integration.selectAsset')}}</h4>
|
||||
<div class="talon-select">
|
||||
<span>{{$t('asset.asset')}}</span>
|
||||
<el-select v-model="assetId" class="right-box-row-with-btn" popper-class="right-box-select-top right-public-box-dropdown-top" placeholder="" :popper-append-to-body="false" size="small">
|
||||
<el-option v-for="item in assetList" :key="item.name" :label="item.name" :value="item.id">
|
||||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<v-selectpage
|
||||
:data="assetList"
|
||||
:tb-columns="assetColumns"
|
||||
:multiple="false"
|
||||
:language="language"
|
||||
key-field="id"
|
||||
show-field="name"
|
||||
:width="640"
|
||||
v-model="assetId"
|
||||
class="form-control"
|
||||
:result-format="resultFormat"
|
||||
>
|
||||
</v-selectpage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,7 +47,39 @@ export default {
|
||||
return {
|
||||
loadFinish: false,
|
||||
assetId: '',
|
||||
assetList: []
|
||||
assetList: [],
|
||||
// asset表头
|
||||
assetColumns: [
|
||||
{ title: 'id', data: 'id' },
|
||||
{
|
||||
title: this.$t('overall.name'),
|
||||
data: function (row) {
|
||||
if (row.name.length > 15) {
|
||||
return row.name.substring(0, 12) + '...'
|
||||
}
|
||||
return row.name
|
||||
}
|
||||
},
|
||||
{ title: 'Manage Ip', data: 'manageIp' },
|
||||
{
|
||||
title: this.$t('overall.type'),
|
||||
data: (row) => {
|
||||
return row.type ? row.type.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('asset.model'),
|
||||
data: (row) => {
|
||||
return row.model ? row.model.name : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('overall.dc'),
|
||||
data: (row) => {
|
||||
return row.dc ? row.dc.name : ''
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -51,6 +91,7 @@ export default {
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
language () { return this.$store.getters.getLanguage },
|
||||
curlUrl () {
|
||||
return 'curl -o- -k -H "Authorization:' + this.token + '" ' + this.ipAddr + '/asset/talon/' + this.assetId + '/install.sh | sudo -E bash'
|
||||
}
|
||||
@@ -64,12 +105,20 @@ export default {
|
||||
if (response.code === 200) {
|
||||
this.assetList = response.data.list
|
||||
if (this.assetList && this.assetList.length > 0) {
|
||||
this.assetId = this.assetList[0].id
|
||||
this.assetId = String(this.assetList[0].id)
|
||||
this.loadFinish = true
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
resultFormat (resp) {
|
||||
if (resp && resp.data) {
|
||||
const assetData = {}
|
||||
assetData.list = resp.data.list
|
||||
assetData.totalRow = resp.data.total
|
||||
return assetData
|
||||
}
|
||||
},
|
||||
copyUrl (txt) {
|
||||
this.$copyText(txt).then(() => {
|
||||
this.$message.success({ message: this.$t('overall.copySuccess') })
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<automatic v-if="tabId==='automatic'"></automatic>
|
||||
<!-- module -->
|
||||
<configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
|
||||
<dashboard ref="dashboard" v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
|
||||
<dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
|
||||
<alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>
|
||||
<metric v-if="tabId==='metric'" :moduleId="detailsObj.id"></metric>
|
||||
</div>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<!-- tabs -->
|
||||
<div class="integration-dialog-content">
|
||||
<integration-tabs ref="tabs" :type="type" :detailsObj="detailsObj"></integration-tabs>
|
||||
<integration-tabs :type="type" :detailsObj="detailsObj"></integration-tabs>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user