feat：project頁面 alerttable完成
This commit is contained in:
zhangyu
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="mc" @click.self="clickOutside">
|
||||
<div class="right-box right-box-edit-endpoint">
|
||||
<div class="right-box right-box-project-alert">
|
||||
<!-- begin--顶部按钮-->
|
||||
<div class="right-box-top-btns">
|
||||
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
|
||||
@@ -11,154 +11,337 @@
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">Add Line</div>
|
||||
<div class="right-box-title">alert List</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表格-->
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
12313212313
|
||||
</el-scrollbar>
|
||||
<el-table
|
||||
class="nz-table tabelH100"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="alertListTable"
|
||||
tooltip-effect="light"
|
||||
:height="tableHeight"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="loading"
|
||||
:cell-class-name="labelsClassName"
|
||||
@selection-change="selectChange"
|
||||
style="width: 100%;height: 100%"
|
||||
@sort-change="tableDataSort"
|
||||
:id="projectId"
|
||||
>
|
||||
<!--<el-table-column-->
|
||||
<!--:resizable="false"-->
|
||||
<!--type="selection"-->
|
||||
<!--width="38"-->
|
||||
<!--align="center"-->
|
||||
<!-->-->
|
||||
<!--</el-table-column>-->
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:minWidth="item.minWidth"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:show-overflow-tooltip="item.prop != 'labels'"
|
||||
min-width="110px"
|
||||
:sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
|
||||
:prop="$tableSet.propTitle(item.prop,'alertMessage')"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
|
||||
<el-tooltip
|
||||
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
|
||||
effect="light">
|
||||
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
|
||||
<span>{{scope.row[item.prop].alertName}}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'summary'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'description'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'labels'" class="labels">
|
||||
<el-tooltip
|
||||
v-for="(item,i) in labelsSort(scope.row.labels)"
|
||||
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
|
||||
effect="light"
|
||||
:disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"
|
||||
:key="item.label"
|
||||
>
|
||||
<alertLabel
|
||||
v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"
|
||||
slot="content"
|
||||
:id="scope.row[item.label].id"
|
||||
:type="item.label"
|
||||
:labelLoading="scope.row[item.label].loading"
|
||||
></alertLabel>
|
||||
<span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
|
||||
<nz-alert-tag
|
||||
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
|
||||
:cursor-point="tagType(item.label) == 'info' ? false : true"
|
||||
:key="item.label"
|
||||
v-if="item.label != 'alertname' && item.label != 'severity'"
|
||||
>
|
||||
{{item.value}}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'state'">
|
||||
<span class="">
|
||||
{{scope.row['state'] == 1 ? "Pending" : ""}}
|
||||
{{scope.row['state'] == 2 ? "Expired" : ""}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
|
||||
<span v-if="!scope.row.current">-</span>
|
||||
<el-popover v-else placement="right" trigger="hover">
|
||||
<div slot="reference">
|
||||
<span class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
|
||||
</div>
|
||||
<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!--<el-table-column width="28" :resizable="false">-->
|
||||
<!--<template slot="header" slot-scope="scope">-->
|
||||
<!--<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">-->
|
||||
<!--<i class="nz-icon nz-icon-gear"></i>-->
|
||||
<!--</span>-->
|
||||
<!--</template>-->
|
||||
<!--<template v-slot="scope">-->
|
||||
<!--<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && tools.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
</el-table>
|
||||
</el-scrollbar>
|
||||
<!-- end--表格-->
|
||||
|
||||
<!--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
<!--底部分頁-->
|
||||
<div class="pagination-bottom">
|
||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var rz = {
|
||||
methods: {
|
||||
rz(e) {
|
||||
resetZIndex(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
import bus from '@/libs/bus';
|
||||
import axios from 'axios';
|
||||
import nzAlertTag from '@/components/page/alert/nzAlertTag';
|
||||
import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
|
||||
import alertLabel from '@/components/common/alert/alertLabel'
|
||||
export default {
|
||||
name:"addLine",
|
||||
name:"alertTable",
|
||||
props:{
|
||||
moduleId:{},
|
||||
projectId:{},
|
||||
},
|
||||
components:{
|
||||
'promql-input': promqlInput,
|
||||
components: {
|
||||
'nz-alert-tag': nzAlertTag,
|
||||
'alertRuleInfo':alertRuleInfo,
|
||||
'alertLabel':alertLabel,
|
||||
},
|
||||
mixins: [rz],
|
||||
watch:{
|
||||
lineData:{
|
||||
handler(n){
|
||||
this.form={
|
||||
arrows:n.arrows,
|
||||
color:n.color,
|
||||
lineId:n.id,
|
||||
},
|
||||
computed: {
|
||||
tagType() {
|
||||
return (key) => {
|
||||
if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
|
||||
return "normal";
|
||||
} else {
|
||||
return "info";
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
tagValue() {
|
||||
return (key, value) => {
|
||||
if (key == 'type') {
|
||||
if (value == 1) {
|
||||
value = this.$t("project.project.project");
|
||||
} else if (value == 2) {
|
||||
value = this.$t("module.module.module");
|
||||
} else if (value == 3) {
|
||||
value = this.$t("asset.asset");
|
||||
}
|
||||
}
|
||||
return key + "：" + value;
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineName:'',
|
||||
lineId:'',
|
||||
width:'',
|
||||
type:'',
|
||||
roundness:'',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t("alert.alertName"),
|
||||
prop: 'alertRule',
|
||||
show: true,
|
||||
width: 180
|
||||
}, {
|
||||
label: this.$t("alert.list.labels"),
|
||||
prop: 'labels',
|
||||
show: true,
|
||||
NotSet:true,
|
||||
minWidth:200
|
||||
}, {
|
||||
label: this.$t("alert.severity"),
|
||||
prop: 'severity',
|
||||
show: true,
|
||||
width: 110,
|
||||
}, {
|
||||
label: this.$t('alert.summary'),
|
||||
prop: 'summary',
|
||||
show: true,
|
||||
minWidth:200
|
||||
}, {
|
||||
label: this.$t('alert.list.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t("alert.startAt"),
|
||||
prop: 'startAt',
|
||||
show: true,
|
||||
width: 150
|
||||
},
|
||||
],
|
||||
unitOptions: chartDataFormat.unitOptions(),
|
||||
promqlKeys:[],
|
||||
expressions: [],
|
||||
promqlCount:0,
|
||||
elementIds:[],
|
||||
legends:[],
|
||||
name:[],
|
||||
unit:[],
|
||||
rules:{
|
||||
arrows: [
|
||||
{ required: true, message: '', trigger: 'change' },
|
||||
],
|
||||
lineName: [
|
||||
{ required: true, message: '', trigger: 'change' },
|
||||
],
|
||||
}
|
||||
tableData:[],
|
||||
loading:false,
|
||||
tableHeight:'100%',
|
||||
searchLabel:{
|
||||
|
||||
},
|
||||
deleteBox:{}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.addExpression();
|
||||
this.getAlertList();
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
|
||||
model.width = parseInt(model.width) || 4;
|
||||
model.smooth={
|
||||
roundness:model.roundness,
|
||||
type:model.type ,
|
||||
};
|
||||
model.expressions=[];
|
||||
this.promqlKeys.forEach((item,index)=>{
|
||||
model.expressions.push({
|
||||
"name": this.name[index],
|
||||
"unit": this.unit[index],
|
||||
"metric": this.expressions[index],
|
||||
"legend": this.legends[index],
|
||||
})
|
||||
getAlertList: function () {
|
||||
this.loading=true;
|
||||
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
|
||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||
this.$set(this.searchLabel, "moduleId", this.moduleId);
|
||||
this.$get('alert/message', {...this.searchLabel}).then(response => {
|
||||
this.loading=false;
|
||||
if (response.code == 200) {
|
||||
this.tableData = response.data.list;
|
||||
this.tableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels);
|
||||
});
|
||||
this.$emit('addLine',model);
|
||||
this.deleteBox.ids='';
|
||||
this.pageObj.total = response.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
expressionChange: function () {
|
||||
|
||||
},
|
||||
addExpression() {
|
||||
this.expressions.push('');
|
||||
this.legends.push('');
|
||||
this.name.push('');
|
||||
this.unit.push('');
|
||||
this.promqlKeys.push(getUUID());
|
||||
this.elementIds.push("");
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression(index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1);
|
||||
this.legends.splice(index, 1);
|
||||
this.name.splice(index, 1);
|
||||
this.unit.splice(index, 1);
|
||||
this.promqlKeys.splice(index, 1);
|
||||
this.elementIds.splice(index, 1);
|
||||
this.promqlCount--;
|
||||
this.$nextTick(() => {
|
||||
this.expressions.forEach((ex, index) => {
|
||||
if (ex) {
|
||||
this.$refs[`promql-${index}`][0].metricChange(ex);
|
||||
}
|
||||
});
|
||||
});
|
||||
labelsSort:function(obj){
|
||||
let buildIn=['asset','endpoint','module','project','datacenter']
|
||||
let labels=JSON.parse(JSON.stringify(obj));
|
||||
let result=[];
|
||||
for(let key of buildIn){
|
||||
if(key in labels){
|
||||
result.push({label:key,value:labels[key]})
|
||||
delete labels[key]
|
||||
}
|
||||
}
|
||||
Object.keys(labels).sort().forEach(key=>{
|
||||
result.push({label:key,value:labels[key]})
|
||||
});
|
||||
return result;
|
||||
},
|
||||
labelsClassName(row) {
|
||||
if (row.column.label == this.$t("alert.list.labels")) {
|
||||
return "alert-message-list-labels";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
pageNo(val) {
|
||||
this.pageObj.pageNo = val;
|
||||
this.getAlertList();
|
||||
},
|
||||
pageSize(val) {
|
||||
this.pageObj.pageSize = val;
|
||||
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
|
||||
this.getAlertList();
|
||||
},
|
||||
selectChange(s) {
|
||||
let ids = [];
|
||||
this.deleteBox.ids = "";
|
||||
s.forEach(item => {
|
||||
ids.push(item.id);
|
||||
});
|
||||
this.deleteBox.ids = ids.join(",");
|
||||
},
|
||||
// alertNmae鼠标划入
|
||||
alertMessagehover(item,index){
|
||||
item.loading=true;
|
||||
this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
// label 鼠标划入
|
||||
labelHover(item,index,type){
|
||||
if(this.labelToolTipDis(type)){
|
||||
return
|
||||
}
|
||||
item[type].loading=true;
|
||||
this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
// label tooltip是否显示
|
||||
labelToolTipDis(labelType){
|
||||
switch(labelType){
|
||||
case 'asset':
|
||||
case 'module':
|
||||
case 'project':
|
||||
return false;
|
||||
default: return true;
|
||||
}
|
||||
},
|
||||
// Severity Label
|
||||
returnSeverityLabel(key){
|
||||
return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
|
||||
},
|
||||
tableDataSort(item){
|
||||
let orderBy='';
|
||||
if(item.order==='ascending'){
|
||||
orderBy=item.prop;
|
||||
}
|
||||
if(item.order==='descending'){
|
||||
orderBy='-'+item.prop;
|
||||
}
|
||||
this.pageObj.orderBy=orderBy;
|
||||
this.$set(this.searchLabel, "orderBy", orderBy);
|
||||
this.getAlertList();
|
||||
},
|
||||
/*关闭弹框*/
|
||||
esc(refresh) {
|
||||
@@ -167,267 +350,23 @@
|
||||
clickOutside() {
|
||||
this.esc(false);
|
||||
},
|
||||
del(){
|
||||
this.$emit('del');
|
||||
this.esc();
|
||||
},
|
||||
colorPickerClick(){
|
||||
this.$refs['colorPicker'].showPicker=true;
|
||||
},
|
||||
colorChange(val){
|
||||
this.form.color=this.colorRGBtoHex(val)
|
||||
},
|
||||
colorRGBtoHex(color) {
|
||||
let rgb = color.split(',');
|
||||
let r = parseInt(rgb[0].split('(')[1]);
|
||||
let g = parseInt(rgb[1]);
|
||||
let b = parseInt(rgb[2].split(')')[0]);
|
||||
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
return hex;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.right-box-project-alert{
|
||||
width: 1220px;
|
||||
}
|
||||
.mc{
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.color-content{
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 140px;
|
||||
}
|
||||
.color{
|
||||
position: relative;
|
||||
}
|
||||
.color-show{
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.color-show-left{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.line-name{
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.form-title{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
padding-left: 28px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
/deep/ .el-form-item__label{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
|
||||
border: 1px solid #DCDFE6;
|
||||
height: 41px;
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.arrows /deep/ .el-input__inner{
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-select{
|
||||
width: 262px;
|
||||
}
|
||||
.nz-btn-edit-ok{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right:0;
|
||||
}
|
||||
.nz-btn-edit-esc{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* begin--搜索框*/
|
||||
.endpoint-asset-search {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: -16px;
|
||||
}
|
||||
.endpoint-asset-search button {
|
||||
height: 22px !important;
|
||||
}
|
||||
.endpoint-asset-search-dropdown {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
width: 44px;
|
||||
left: 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item {
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
cursor: default;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
.endpoint-asset-label-txt {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:first-of-type {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:last-of-type {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.endpoint-asset-search-dropdown-item:hover {
|
||||
background-color: #222;
|
||||
color: #ff9900;
|
||||
}
|
||||
.endpoint-asset-search-input {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* end--搜索框*/
|
||||
|
||||
/* begin--table*/
|
||||
.endpoint-sub-table {
|
||||
padding-top: 30px;
|
||||
height: 440px;
|
||||
}
|
||||
.line-100 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.endpoint-sub-table-head {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
color: #656565;
|
||||
}
|
||||
.endpoint-sub-table-row:hover {
|
||||
background-color: #dadada;
|
||||
cursor: default;
|
||||
}
|
||||
.endpoint-sub-table-row-active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
.endpoint-sub-table-row-selected {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.endpoint-sub-table-col {
|
||||
display: inline-block;
|
||||
width: calc(50% - 15px);
|
||||
padding-left: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.endpoint-sub-table-paginate-all {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 17px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.endpoint-sub-table-body {
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
height: calc(100% - 34px);
|
||||
}
|
||||
.endpoint-sub-table-body-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #e9ebec;
|
||||
position: absolute;
|
||||
opacity: 0.2;
|
||||
}
|
||||
.endpoints-clear-btn {
|
||||
margin: 6px 0 0 7px;
|
||||
z-index: 11;
|
||||
}
|
||||
/* end--table*/
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.right-box-edit-endpoint .el-pagination__total {
|
||||
float: left;
|
||||
}
|
||||
right-box-edit-endpoint .pagination {
|
||||
padding-top: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
|
||||
font-size: 13px;
|
||||
min-width: 20px !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
color: white !important;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: #666;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li.number.active{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: $global-text-color-active;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user