gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-1023 style: 下拉列表 样式调整

Browse Source
This commit is contained in:
@changcode
2021-09-24 17:07:16 +08:00
parent 74e089a820
commit 025ae13877
18 changed files with 84 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -274,7 +274,10 @@
width: 100%; width: 100%;
} }
.right-box-select-dropdown { .right-box-select-dropdown {
width: 625px; width: 626px;
.el-picker-panel__content {
width: calc(100% - 28px);
}
} }
.limit-height .el-cascader-menu { .limit-height .el-cascader-menu {
max-height: 200px; max-height: 200px;
@@ -311,3 +314,25 @@
.el-form-item__content .el-autocomplete .el-input-group { .el-form-item__content .el-autocomplete .el-input-group {
vertical-align: unset; vertical-align: unset;
} }
.right-public-box-dropdown {
width: 640px;
}
.right-box-public-dropdown {
width: 308px;
}
.right-public-box-dropdown-width {
width: 297px;
}
.right-box-public-alert-dropdown {
width: 320px;
}
.right-public-box-dropdown,.right-box-public-dropdown,.right-public-box-dropdown-width,.right-box-select-dropdown,.right-box-public-alert-dropdown {
margin-top: 0 !important;
margin-bottom: 0 !important;
.popper__arrow {
opacity: 0;
}
}
.right-box-dropdown-top.right-box-select-dropdown,.right-public-box-dropdown.right-box-dropdown-top,.dc-dropdown.right-box-dropdown-top {
margin: 5px 0 !important;
}

13
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1137,6 +1137,11 @@ li{
} }
.dc-dropdown { .dc-dropdown {
z-index: 2952 !important; z-index: 2952 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
.popper__arrow {
opacity: 0;
}
} }
.asset-state .cell { .asset-state .cell {
height: 38px; height: 38px;
@@ -1185,6 +1190,14 @@ li{
.chart-box-dropdown-small{ .chart-box-dropdown-small{
width: 200px; width: 200px;
} }
.chart-box-dropdown-width{
width: 303px;
margin-top: 0 !important;
margin-bottom: 0 !important;
.popper__arrow {
opacity: 0;
}
}
.config-dropdown-btn i { .config-dropdown-btn i {
font-size: 12px; font-size: 12px;
} }

2
nezha-fronted/src/components/common/popBox/selectAssetType.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel" transition="slide"> <el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel right-public-box-dropdown" transition="slide">
<div> <div>
<div class="pop-item-wider"> <div class="pop-item-wider">

2
nezha-fronted/src/components/common/rightBox/administration/modelBox.vue
View File

@@ -15,7 +15,7 @@
</el-form-item> </el-form-item>
<!--brand--> <!--brand-->
<el-form-item :label='$t("config.model.brand")' prop="brandId"> <el-form-item :label='$t("config.model.brand")' prop="brandId">
<el-select value-key="id" allow-create class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project"> <el-select value-key="id" allow-create class="right-box__select" popper-class="right-box-select-dropdown right-public-box-dropdown prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
<el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>

4
nezha-fronted/src/components/common/rightBox/agentBox.vue
View File

@@ -15,7 +15,7 @@
<!--DC--> <!--DC-->
<el-form-item :label="$t('config.dc.dc')" prop="dc.name"> <el-form-item :label="$t('config.dc.dc')" prop="dc.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-public-box-dropdown right-box-dropdown-top 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">
<span class="config-dropdown-label-txt">{{item.name}}</span> <span class="config-dropdown-label-txt">{{item.name}}</span>
</el-option> </el-option>
@@ -42,7 +42,7 @@
<!-- :options="$CONSTANTS.agent.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-public-box-dropdown prevent-clickoutside" size="small" value-key="value">
<!-- <el-option-group--> <!-- <el-option-group-->
<!-- v-for="group in agent2.theData"--> <!-- v-for="group in agent2.theData"-->
<!-- :key="group.label"--> <!-- :key="group.label"-->

22
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -22,7 +22,7 @@
<el-select <el-select
v-model="editAlertRule.type" v-model="editAlertRule.type"
class="right-box__select half-form-item" class="right-box__select half-form-item"
popper-class="right-box-select-dropdown prevent-clickoutside" popper-class="right-box-public-dropdown prevent-clickoutside"
size="small" size="small"
:disabled="showTypeSelect" :disabled="showTypeSelect"
@change="selectAlertRuleMetric"> @change="selectAlertRuleMetric">
@@ -36,7 +36,7 @@
</el-form-item> </el-form-item>
<!--severity--> <!--severity-->
<el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId"> <el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
<el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="prevent-clickoutside" size="small"> <el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-public-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id" style="width: 312px"> <el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id" style="width: 312px">
<div style="display: flex;justify-content: space-between;padding: 5px;"> <div style="display: flex;justify-content: space-between;padding: 5px;">
<div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div> <div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
@@ -102,7 +102,7 @@
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]"> <el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable <el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
placeholder="" placeholder=""
popper-class="no-style-class unit-popper-class" popper-class="no-style-class dc-dropdown right-box-dropdown-top unit-popper-class"
size="small" size="small"
:disabled="!showSnmpTrap" :disabled="!showSnmpTrap"
style="width: 100%" style="width: 100%"
@@ -128,7 +128,7 @@
v-model="editAlertRule.autoExpired" v-model="editAlertRule.autoExpired"
class="right-box__select half-form-item" class="right-box__select half-form-item"
placeholder="" placeholder=""
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-public-dropdown"
size="small" size="small"
> >
<el-option <el-option
@@ -165,7 +165,7 @@
class="right-box__select half-form-item" class="right-box__select half-form-item"
placeholder="" placeholder=""
:popper-append-to-body="false" :popper-append-to-body="false"
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-public-dropdown"
size="small" size="small"
> >
<el-option <el-option
@@ -188,7 +188,7 @@
class="right-box__select half-form-item" class="right-box__select half-form-item"
placeholder="" placeholder=""
:popper-append-to-body="false" :popper-append-to-body="false"
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-public-dropdown"
size="small" size="small"
> >
<el-option <el-option
@@ -213,7 +213,7 @@
placeholder="" placeholder=""
multiple multiple
@change="$refs.alertRuleForm.validateField('schedDays')" @change="$refs.alertRuleForm.validateField('schedDays')"
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-select-dropdown"
size="small" size="small"
> >
<el-option <el-option
@@ -232,6 +232,7 @@
:format="'HH:mm'" :format="'HH:mm'"
v-model="editAlertRule.schedStime" v-model="editAlertRule.schedStime"
size="small" size="small"
popper-class="right-box-public-dropdown"
:clearable = 'false' :clearable = 'false'
:picker-options="{ :picker-options="{
}"> }">
@@ -241,6 +242,7 @@
:value-format="'HH:mm'" :value-format="'HH:mm'"
:format="'HH:mm'" :format="'HH:mm'"
size="small" size="small"
popper-class="right-box-public-dropdown"
:clearable = 'false' :clearable = 'false'
v-model="editAlertRule.schedEtime" v-model="editAlertRule.schedEtime"
:picker-options="{ :picker-options="{
@@ -257,7 +259,7 @@
class="right-box__select half-form-item" class="right-box__select half-form-item"
placeholder="" placeholder=""
:popper-append-to-body="false" :popper-append-to-body="false"
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-public-dropdown"
size="small" size="small"
@change="receiverAndNotifyValidate" @change="receiverAndNotifyValidate"
> >
@@ -281,7 +283,7 @@
class="right-box__select half-form-item" class="right-box__select half-form-item"
placeholder="" placeholder=""
:popper-append-to-body="false" :popper-append-to-body="false"
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-public-dropdown"
size="small" size="small"
@change="receiverAndNotifyValidate" @change="receiverAndNotifyValidate"
> >
@@ -306,7 +308,7 @@
filterable filterable
multiple multiple
placeholder="" placeholder=""
popper-class="prevent-clickoutside" popper-class="prevent-clickoutside right-box-select-dropdown"
size="small" size="small"
value-key="userId" value-key="userId"
@change="receiverShowChange" @change="receiverShowChange"

4
nezha-fronted/src/components/common/rightBox/alertSilenceBox.vue
View File

@@ -39,7 +39,7 @@
<span class="datepicker-title">{{ $t("overall.startTime") }}</span> <span class="datepicker-title">{{ $t("overall.startTime") }}</span>
<my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')" <my-date-picker ref="calendar" v-model="editAlertSilence.startAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
align="right" class=" " format="yyyy/MM/dd HH:mm:ss" align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
popper-class="panel-time-picker-popper" popper-class="panel-time-picker-popper right-box-public-alert-dropdown"
prefix-icon=" " prefix-icon=" "
size="mini" size="mini"
type="datetime" type="datetime"
@@ -51,7 +51,7 @@
<span class="datepicker-title">{{ $t("overall.endTime") }}</span> <span class="datepicker-title">{{ $t("overall.endTime") }}</span>
<my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')" <my-date-picker ref="calendar" v-model="editAlertSilence.endAt" :clearable="false" :placeholder="$t('dashboard.panel.startTime')"
align="right" class=" " format="yyyy/MM/dd HH:mm:ss" align="right" class=" " format="yyyy/MM/dd HH:mm:ss"
popper-class="panel-time-picker-popper" popper-class="panel-time-picker-popper right-box-public-alert-dropdown"
prefix-icon=" " prefix-icon=" "
size="mini" size="mini"
type="datetime" type="datetime"

2
nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue
View File

@@ -161,7 +161,7 @@
:options="fieldGroupData" :options="fieldGroupData"
:props="labelCascProp" :props="labelCascProp"
class="hide-input" class="hide-input"
popper-class="prevent-clickoutside limit-height" popper-class="prevent-clickoutside right-box-dropdown-top right-public-box-dropdown-width limit-height"
size="small" size="small"
@change="addLabel" @change="addLabel"
></el-cascader> ></el-cascader>

5
nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
View File

@@ -50,7 +50,7 @@
:placeholder="lockModelInputValue" :placeholder="lockModelInputValue"
:options="options.brandAndModelOptions" :options="options.brandAndModelOptions"
:props="{ label: 'name', value: 'id' }" :props="{ label: 'name', value: 'id' }"
popper-class="prevent-clickoutside limit-height" popper-class="prevent-clickoutside right-box-dropdown-top right-box-select-dropdown limit-height"
size="small" size="small"
style="width: 100%;" style="width: 100%;"
></el-cascader> ></el-cascader>
@@ -65,6 +65,7 @@
v-model="editAsset.purchaseDate" v-model="editAsset.purchaseDate"
placeholder="" placeholder=""
size="small" size="small"
popper-class="right-box-select-dropdown"
style="width: 100%" style="width: 100%"
type="date" type="date"
value-format="yyyy-MM-dd"> value-format="yyyy-MM-dd">
@@ -165,7 +166,7 @@
:options="options.fieldGroupOptions" :options="options.fieldGroupOptions"
:props="labelCascProp" :props="labelCascProp"
class="hide-input" class="hide-input"
popper-class="prevent-clickoutside limit-height" popper-class="prevent-clickoutside right-box-dropdown-top right-public-box-dropdown-width limit-height"
size="small" size="small"
@change="addLabel" @change="addLabel"
></el-cascader> ></el-cascader>

4
nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
View File

@@ -20,7 +20,7 @@
<el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input> <el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.assetLabel.group")' prop="groupId"> <el-form-item :label='$t("config.assetLabel.group")' prop="groupId">
<el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" :popper-append-to-body="false"> <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" popper-class="right-box-select-dropdown right-public-box-dropdown prevent-clickoutside" :popper-append-to-body="false">
<el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option> <el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -42,7 +42,7 @@
</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" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="selectType"> <el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-dropdown right-public-box-dropdown prevent-clickoutside" size="small" @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>

2
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -21,7 +21,7 @@
<el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input> <el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("asset.principal")' prop="principal"> <el-form-item :label='$t("asset.principal")' prop="principal">
<el-select value-key="id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal"> <el-select value-key="id" class="right-box__select" popper-class="right-public-box-dropdown right-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
</el-option> </el-option>
</el-select> </el-select>

4
nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
View File

@@ -111,7 +111,7 @@
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type"> <el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id || true" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <el-select id="module-box-input-type" v-model="editEndpoint.configs[0].config.protocol" :disabled="!!editEndpoint.id || true" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -354,7 +354,7 @@
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item"> <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)"> <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>

1
nezha-fronted/src/components/common/rightBox/exprTmplBox.vue
View File

@@ -23,6 +23,7 @@
:fetch-suggestions="querySearch" :fetch-suggestions="querySearch"
:placeholder="$t('overall.placeHolder')" :placeholder="$t('overall.placeHolder')"
class="inline-input" class="inline-input"
popper-class="right-public-box-dropdown right-box-dropdown-top"
size="small" size="small"
style="width: 100%;" style="width: 100%;"
></el-autocomplete> ></el-autocomplete>

17
nezha-fronted/src/components/common/rightBox/locationCascader.vue
View File

@@ -412,27 +412,13 @@ export default {
} }
.dropdown{ .dropdown{
position: absolute; position: absolute;
min-width: 200px; width: 616px;
padding:5px; padding:5px;
background-color: #fff; background-color: #fff;
display: none; display: none;
z-index: 2020; z-index: 2020;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
margin: 10px 0;
}
.dropdown:before{
content: "";
width: 0;
height: 0;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
position: absolute;
left: 10%;
top:0%;
margin-top:-5px
} }
.dropdown:after{ .dropdown:after{
@@ -440,7 +426,6 @@ export default {
.dropdown-active{ .dropdown-active{
display: block !important; display: block !important;
height: 200px; height: 200px;
width: 100%;
} }
.location-container{ .location-container{
height: 100%; height: 100%;

2
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -21,7 +21,7 @@
ref="modelSelector" ref="modelSelector"
size="small" size="small"
class="right-box__select" class="right-box__select"
popper-class="prevent-clickoutside limit-height" popper-class="prevent-clickoutside limit-height right-public-box-dropdown right-box-dropdown-top"
clearable></el-cascader> clearable></el-cascader>
</el-form-item> </el-form-item>
<el-form-item :label="$t('overall.remark')" prop="remark"> <el-form-item :label="$t('overall.remark')" prop="remark">

8
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -19,7 +19,7 @@
</el-form-item> </el-form-item>
<!--project--> <!--project-->
<el-form-item :label='$t("project.project.projectName")' prop="projectId"> <el-form-item :label='$t("project.project.projectName")' prop="projectId">
<el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id"> <el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -91,7 +91,7 @@
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type"> <el-form-item :label='$t("project.endpoint.type")' class="half-form-item" prop="type">
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType"> <el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown right-box-public-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -298,7 +298,7 @@
<el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth"> <el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
<!--authtype--> <!--authtype-->
<el-form-item :label='$t("project.endpoint.type")' prop="authtype"> <el-form-item :label='$t("project.endpoint.type")' prop="authtype">
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType"> <el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown module-project-box-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
<el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -334,7 +334,7 @@
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic"> <el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
<!--type--> <!--type-->
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item"> <el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)"> <el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-public-box-dropdown-width prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option> <el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>

2
nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
View File

@@ -18,7 +18,7 @@
<el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input> <el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label='$t("config.mib.credential.type")' prop="type"> <el-form-item :label='$t("config.mib.credential.type")' prop="type">
<el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" @change="typeChange"> <el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-dropdown right-box-dropdown-top prevent-clickoutside" @change="typeChange">
<el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
<span class="panel-dropdown-label-txt" >{{item.label}}</span> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>

20
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -204,7 +204,7 @@
<div class="form-items--half-width-group"> <div class="form-items--half-width-group">
<!-- type --> <!-- type -->
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type"> <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
<el-select id="chart-box-type" v-model="editChart.type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length" placeholder="" popper-class="prevent-clickoutside" size="small" value-key="chartType" @change="chartTypeChange"> <el-select id="chart-box-type" v-model="editChart.type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length" placeholder="" popper-class="chart-box-dropdown-width prevent-clickoutside" size="small" value-key="chartType" @change="chartTypeChange">
<el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id"> <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span> <span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option> </el-option>
@@ -213,7 +213,7 @@
<!--group--> <!--group-->
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group"> <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
<el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="prevent-clickoutside" size="small" value-key="chartType"> <el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="chart-box-dropdown-width prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id"> <el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span> <span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option> </el-option>
@@ -223,7 +223,7 @@
<!-- varType --> <!-- varType -->
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'chartTemp'"> <el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'chartTemp'">
<el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType"> <el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-dropdown chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr"> <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span> <span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option> </el-option>
@@ -238,7 +238,7 @@
<div class="form-items--half-width-group"> <div class="form-items--half-width-group">
<!--width--> <!--width-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span"> <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
<el-select id="chart-box-span" v-model="editChart.span" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" value-key="chartSpan"> <el-select id="chart-box-span" v-model="editChart.span" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" size="small" value-key="chartSpan">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item"> <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span> <span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option> </el-option>
@@ -263,7 +263,7 @@
</el-autocomplete>--> </el-autocomplete>-->
<!-- 由px改为span --> <!-- 由px改为span -->
<el-select id="chart-box-height" v-model="editChart.height" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" value-key="chartSpan"> <el-select id="chart-box-height" v-model="editChart.height" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" size="small" value-key="chartSpan">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item"> <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span> <span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option> </el-option>
@@ -274,7 +274,7 @@
<el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit"> <el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
<el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable <el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder="" placeholder=""
popper-class="dc-dropdown prevent-clickoutside chart-box-unit" popper-class="chart-box-dropdown-option-top dc-dropdown right-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small" size="small"
style="width: 100%" style="width: 100%"
@change="unitSelected" @change="unitSelected"
@@ -291,7 +291,7 @@
</el-form-item>--> </el-form-item>-->
<!--lock--> <!--lock-->
<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock"> <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock">
<el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate"> <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" size="small" @change="$forceUpdate">
<el-option v-for="item in lockList" :key="item.value" :label="item.label" :value="item.value" class="width310"> <el-option v-for="item in lockList" :key="item.value" :label="item.label" :value="item.value" class="width310">
<span class="panel-dropdown-label-txt" >{{item.label}}</span> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>
@@ -303,20 +303,20 @@
</el-form-item> </el-form-item>
<el-form-item v-if="editChart.type === 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' class="form-item--half-width" prop="nullType"> <el-form-item v-if="editChart.type === 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' class="form-item--half-width" prop="nullType">
<el-select id="chart-box-nullType" v-model="editChart.param.nullType" placeholder="" popper-class="chart-box-dropdown-small prevent-clickoutside" size="small" @change="$forceUpdate()" class="width310"> <el-select id="chart-box-nullType" v-model="editChart.param.nullType" placeholder="" popper-class="chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" size="small" @change="$forceUpdate()" class="width310">
<el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics"> <el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
<el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate"> <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="chart-box-dropdown-option-top chart-box-dropdown-width prevent-clickoutside" size="small" @change="$forceUpdate">
<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value" class="width310"> <el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value" class="width310">
<span class="panel-dropdown-label-txt" >{{item.label}}</span> <span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.limit")' prop="param.limit"> <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.limit")' prop="param.limit">
<el-select v-model="editChart.param.limit" size="small"> <el-select v-model="editChart.param.limit" popper-class="chart-box-dropdown-width" size="small">
<el-option v-for="option in limitOptions" :key="option" :value="option" class="width310"></el-option> <el-option v-for="option in limitOptions" :key="option" :value="option" class="width310"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>