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

metric proview样式修改

Browse Source
This commit is contained in:
wujiawen
2020-01-21 14:19:30 +08:00
parent 8ce3dae06c
commit c68d2c9021
6 changed files with 234 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,11 +126,12 @@ li{
}
.nz-btn-metric-bottom{
position: fixed;
left:52%;
bottom:30px;
right:37%;
top:95%;
margin-bottom:30px;
}
.nz-btn-metricset-left{
margin: 0 20px 30px 515px;
margin: 0 20px 30px 780px;
}
.nz-btn-metric-bottom-left{
margin-right:30px;
@@ -268,7 +269,6 @@ li{
.nz-input-append {
position: absolute;
right: 8px;
line-height: 38px;
color: #666;
}
/* end--el-input扩展 */

22
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -92,20 +92,29 @@
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
}
.nz-tab-chart-item-box{
padding:0;
display: inline-block;
}
.nz-tab-chart-style-left{
margin-left:40px;
}
</style>
<template>
<el-form :model="elementInfo" ref="elementInfo" >
<el-row >
<el-col span="16">
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
<!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}}
</el-col>
<el-col span="8">
<div class="nz-tab-item-box">
<div @click="clickTabelShow(1,'normal')" class="nz-tab-style" :class="{'nz-tab-style-light' : tableShow == 1}">
<div class="nz-tab-chart-item-box">
<div @click="clickTabelShow(1,'normal')" class="nz-tab-style nz-tab-chart-style-left" :class="{'nz-tab-style-light' : tableShow == 1}">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right" :class="{'nz-tab-style-light' : tableShow == 2}">
<div @click="clickTabelShow(2,'expert')" class="nz-tab-style nz-tab-style-light-right " :class="{'nz-tab-style-light' : tableShow == 2}">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
</div>
@@ -134,7 +143,9 @@
</el-form-item>
</template>
<!-- create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="8">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
@@ -148,7 +159,9 @@
</el-scrollbar>
</div>
</el-col>
<el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="14">
<div class="li-list-part-label-val-list" >
<el-scrollbar style="height: 100%">
@@ -165,6 +178,7 @@
</el-scrollbar>
</div>
</el-col>
</el-row>
</el-form>
</template>

153
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -22,7 +22,7 @@
.nz-btn-style-higher{
line-height: 22px;
}
.li-list-part {
/* .li-list-part {
width: 90%;
height: 130px;
border: 1px solid #cfcfcf;
@@ -34,8 +34,28 @@
border: 1px solid #cfcfcf;
overflow-y: auto;
margin-top: 20px;/*21*/
border: 0px;
/* border: 0px;
} */
.li-list-part {
height: 200px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 8px 12px;
color: #666;
width:90%;
}
.li-list-part-label-val-list {
height: 250px;
border: 1px solid #dcdfe6;
margin-top: 33px;
border-radius: 4px;
padding: 0px 5px 10px 5px;
box-sizing:border-box;
width:90%;
margin-left:-20px;
}
.no-list-style{
list-style: none;
}
@@ -54,29 +74,90 @@
.metric-title-row-position{
margin-top:-10px;
}
.star-red{
color:#ff1818;
}
/* .star-red{
/* color:#ff1818; */
/* } */
.full-width{
width:100%;
}
.mt1{
margin-top:1px;
}
.symbol-area {
position: relative;
height: 135px;
}
.symbol-equal {
position: absolute;
bottom: 0;
left: 18px;
color: #c0c4cc;
font-size: 24px;
}
.symbol-delete {
padding-left: 8px;
cursor: pointer;
}
.symbol-delete i {
color: #c0c4cc;
}
.el-scrollbar__wrap{
/* overflow: auto !important; */
box-sizing:border-box;
margin:0 auto;
}
.el-input .el-input__inner{
/* width:80%; */
/* display:flex; */
}
.metric-title-position{
margin-bottom:2px;
}
/* .right-box-form-content-left{
line-height: 32px;
text-align: left;
width: 100%;
padding:0 10px;
} */
.el-form-item__content{
padding-left:15px;
margin:0 auto;
}
.li-list-part-label-val-list .metric-title-position .el-form-item__label {
font-size: 14px;
height: 10px;
color: #666;
line-height: 14px;
margin:0 auto;
}
.li-list-part-label-val-list .el-select--mini {
width: calc(100% - 45px);
margin:0 auto;
}
.nz-tab-style-left{
margin-left:130px;
}
</style>
<template>
<el-form :model="elementInfo" ref="elementInfo" >
<el-row >
<el-col span="16">
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
<!-- <span class="star-red">*</span>&nbsp; -->
{{$t('dashboard.panel.chartForm.metric')}}
</el-col>
<el-col span="8">
<div class="nz-tab-item-box" v-show="tableShow == 1">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 2"> -->
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light">
<div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="" class="nz-tab-style nz-tab-style-light-right">
<div @click="clickTabelShow(2,'normal')" class="nz-tab-style nz-tab-style-light-right ">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
@@ -86,13 +167,13 @@
<span>{{$t('dashboard.metric.expert')}}</span>
</button> -->
</div>
<div class="nz-tab-item-box" v-show="tableShow == 2">
<div @click="clickTabelShow(1,'expert')" class="nz-tab-item-box" v-show="tableShow == 2">
<!-- <div class="nz-btn-group float-left" v-show="tableShow == 1"> -->
<div @click="" class="nz-tab-style">
<div class="nz-tab-style nz-tab-style-left">
<span>{{$t('dashboard.metric.normal')}}</span>
</div>
<div @click="clickTabelShow(1,'expert')" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right">
<div @click="" class="nz-tab-style nz-tab-style-light nz-tab-style-light-right ">
<span>{{$t('dashboard.metric.expert')}}</span>
</div>
<!-- <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
@@ -135,9 +216,46 @@
&nbsp;&nbsp;<button type="button" v-if="countTotal > 1" @click="deleteTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
<!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="8">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
<el-scrollbar style="height: 100%">
<div class="li-cursor" v-if="!item.isSelect"
v-for="(item,index) in elementInfo.tagList"
@click="getLidata(index,item)"
:key="index">
{{item.name}}
</div>
</el-scrollbar>
</div>
</el-col>
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="12">
<el-col span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
<el-col span="14">
<div class="li-list-part-label-val-list" >
<el-scrollbar style="height: 100%">
<el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-select v-model="item.value" ref="tagSelect" size="mini"
placeholder=""
collapse-tags
filterable
@change="changeTag"
multiple>
<el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j" :value="op">{{op}}</el-option>
</el-select>
<span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
</el-form-item>
</el-scrollbar>
</div>
</el-col>
</el-row>
<!-- create chart组件显示框 -->
<!-- <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<!-- <el-col span="12">
<div class="metric-title-label">{{elementInfo.metric}}</div>
<div class="li-list-part">
<ul class="no-list-style">
@@ -156,9 +274,10 @@
<div class="li-list-part-label-val-list" >
<el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row >{{item.name}}</el-row>
<el-row class="metric-title-row-position" >
<el-row class="metric-title-row-position" > -->
<!--多选列表 -->
<el-col span="20" >
<!-- <el-col span="20" >
<el-select v-model="item.value" ref="tagSelect" size="small"
placeholder=""
collapse-tags
@@ -174,8 +293,8 @@
</el-row>
</el-form-item>
</div>
</el-col>
</el-row>
</el-col> -->
<!-- </el-row> -->
</el-form>
</template>
<script>

4
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -14,8 +14,8 @@
<div class="top-tools" >
<div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div>
<!-- <div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div> -->
<div class="float-right mr-10">
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"

1
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -13,6 +13,7 @@
.metric-form {
padding-top: 20px;
box-sizing: border-box;
position: relative;
// height: 69%;
// max-height: 400px;
// overflow: auto;

53
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -16,6 +16,9 @@
.common-middle{
margin:-20px auto;
}
.element-item {
padding: 20px 0;
}
</style>
<template>
<div class="metric-set" >
@@ -28,18 +31,31 @@
@on-change-condition="getCondition"
></chart-metric>
</el-row>
<!-- <el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
@on-change-condition="getCondition"
></chart-metric>
</el-row> -->
<el-row class="pt-5 pb-5 ml-3 operate-area">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-metricset-left nz-btn-metricbtn">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal' : !(saveDisabled || loading)}"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed nz-btn-metricbtn' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row>
<el-row class=" nz-btn-metric-bottom">
<el-row class="nz-btn-metric-bottom">
<!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
<button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}"
@@ -126,6 +142,7 @@ export default {
total: 0,
loading: false, // 加载中
chartModal: false, // 展示弹出框
elements: [1], // 指标部分 tarNum
// 新建信息
chartInfo: {
title: '', // 名称
@@ -213,6 +230,38 @@ export default {
this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
this.$refs.panelBox.getTableData();
},
// 删除指标,第一步, 新方法
deleteTarget(index) {
//alert('box第一步，循环所有的metric，为什么要循环？？');
this.deleteIndex = index;
// alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
this.$refs.chartTag.forEach((item) => {
// 子组件保存内容到bus
item.subSave();
});
},
// subSave保存成功后回调,第二步
subOk() {
// 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
//alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
this.subCount += 1;
if (this.subCount === this.elements.length) {
this.subCount = 0;
// 保存完成,进行删除操作
//alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
//alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
item.setSubdata(index); // 将数据从bus重新赋值
});
});
}
},
/*
// 取消创建modal
cancel() {