perf: 样式调整（除弹框外）
1.样式调整，除弹框外的顶部、左侧、右侧列表
This commit is contained in:
chenjinsong
@@ -81,6 +81,12 @@ html {
|
||||
-webkit-appearance: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/
|
||||
.nz-btn.nz-btn-size-small {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
.nz-btn.nz-btn-style-normal {
|
||||
background-color: #16b;
|
||||
background-image: linear-gradient(#2d8cec, #16b);
|
||||
@@ -89,11 +95,37 @@ html {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.75);
|
||||
}
|
||||
.nz-btn.nz-btn-style-light {
|
||||
background-color: #dedede;
|
||||
background-image: linear-gradient(white,#dedede);
|
||||
border: 1px solid #b8b8b8;
|
||||
border-top-color: #dedede;
|
||||
color: #444;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
}
|
||||
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
|
||||
background-image: linear-gradient(#dedede,#c5c5c5);
|
||||
}
|
||||
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
|
||||
background-image: linear-gradient(#16b, #0d4d8c);
|
||||
}
|
||||
.nz-btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.nz-btn.nz-btn-disabled {
|
||||
background-image: none;
|
||||
background-color: #666;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
border-color: #999;
|
||||
}
|
||||
.nz-btn-group .nz-btn:first-child:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.nz-btn-group .nz-btn:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
/* end--按钮组件*/
|
||||
/* end--通用*/
|
||||
@@ -144,49 +176,40 @@ html {
|
||||
.top-tools {
|
||||
padding: 22px 0 13px 0;
|
||||
}
|
||||
.top-tools .el-button--mini {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.top-tools .top-tool {
|
||||
float: left;
|
||||
}
|
||||
.top-tools .top-tool-right {
|
||||
float: right;
|
||||
}
|
||||
.top-tools .top-tool-search {
|
||||
width: 320px;
|
||||
}
|
||||
.top-tools .el-button-group {
|
||||
float: left;
|
||||
}
|
||||
.top-tools .top-tool-btn {
|
||||
border-radius: 5px;
|
||||
width: 100px;
|
||||
}
|
||||
.top-tools .top-tool-btn:focus, .top-tools .top-tool-btn:hover {
|
||||
color: #606266;
|
||||
background-color: white;
|
||||
}
|
||||
.top-tools .top-tool-btn-active {
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
background-color: #656565;
|
||||
}
|
||||
.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
|
||||
color: white;
|
||||
background-color: #656565;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.top-tools .top-tool-btn-txt {
|
||||
font-size: 14px;
|
||||
}
|
||||
/* end--顶部工具栏*/
|
||||
/* start--内容*/
|
||||
.content-right>.el-table{
|
||||
border-radius: 4px;
|
||||
border: 1px solid #D7D7D7;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
margin-top: 30px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.content-right .el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
.content-right .el-table--border::after, .el-table--group::after {
|
||||
width: 0;
|
||||
}
|
||||
.content-right .el-table__header {
|
||||
line-height: 40px;
|
||||
text-shadow: 1px 1px white;
|
||||
}
|
||||
.content-right .el-table .el-table__header th {
|
||||
background-image: linear-gradient(#eee,#e0e0e0);
|
||||
color: #444444;
|
||||
border-right: 1px solid #d4d4d4;
|
||||
border-left: 1px solid white;
|
||||
border-bottom: 1px solid #d4d4d4;;
|
||||
}
|
||||
.content-right .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
||||
border-right: none;
|
||||
}
|
||||
.content-right .el-table td {
|
||||
padding: 4px 0;
|
||||
}
|
||||
/* end--内容*/
|
||||
/* start--分页*/
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="header">
|
||||
<div class="submenu">
|
||||
<el-menu
|
||||
class="el-menu-demo"
|
||||
class="nz-menu"
|
||||
mode="horizontal"
|
||||
background-color="#232f3e"
|
||||
text-color="#ffffff"
|
||||
@@ -77,7 +77,29 @@
|
||||
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<el-menu
|
||||
class=""
|
||||
mode="horizontal"
|
||||
background-color="#232f3e"
|
||||
text-color="#ffffff"
|
||||
unique-opened
|
||||
>
|
||||
<el-submenu index="6" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div>[username]</div>
|
||||
</template>
|
||||
<el-menu-item index="6-0">
|
||||
<div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="6-1">
|
||||
<div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')">中文</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="6-2">
|
||||
<div @click="jumpTo('')">{{$t('overall.signOut')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
<!--<div class="header-user-con">
|
||||
<div class="flagselect">
|
||||
</div>
|
||||
<el-popover
|
||||
@@ -105,7 +127,7 @@
|
||||
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||
@@ -398,7 +420,7 @@ export default {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.el-menu-demo>li:first-of-type {
|
||||
.nz-menu>li:first-of-type {
|
||||
position: fixed;
|
||||
left: 40%;
|
||||
top: 0;
|
||||
|
||||
@@ -18,7 +18,8 @@ const en = {
|
||||
clearAll: "Clear All",
|
||||
clear: "Clear",
|
||||
name: 'Name',
|
||||
cover: 'Cover'
|
||||
cover: 'Cover',
|
||||
signOut: 'Sign Out'
|
||||
},
|
||||
search: {
|
||||
searchTip: 'Press Enter or click to search',
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
ref="page"
|
||||
background
|
||||
@size-change="size"
|
||||
@prev-click="prev"
|
||||
@next-click="next"
|
||||
@@ -10,7 +9,7 @@
|
||||
:current-page="pageObj.pageNo"
|
||||
:page-sizes="[20, 50, 100, 300]"
|
||||
:page-size="20"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
layout="prev, pager, next, jumper, total"
|
||||
:total="this.pageObj.total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
@@ -57,4 +56,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-pager li.active {
|
||||
color: #f90;
|
||||
cursor: default;
|
||||
}
|
||||
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
color: #f90;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,14 +49,9 @@
|
||||
<div class="content-right">
|
||||
<div class="top-tools">
|
||||
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</button>
|
||||
<!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>-->
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
||||
@@ -169,7 +169,7 @@
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
||||
@@ -857,9 +857,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-table {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
padding: 0px;
|
||||
|
||||
@@ -1324,10 +1324,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-table {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
padding: 0px;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -1429,10 +1429,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-table {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-popover {
|
||||
padding: 0px;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -50,14 +50,9 @@
|
||||
<div class="content-right">
|
||||
<div class="top-tools">
|
||||
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</button>
|
||||
<!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>-->
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
||||
@@ -72,14 +72,9 @@
|
||||
<div class="content-right">
|
||||
<div class="top-tools">
|
||||
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</button>
|
||||
<!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>-->
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,701 +0,0 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<div class="content-left">
|
||||
<div class="sidebar-title">{{$t('project.project.project')}}：{{currentProject.name}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div
|
||||
v-for="item in moduleList"
|
||||
class="sidebar-info-item"
|
||||
:class="{'sidebar-info-item-active': item.id == currentModule.id}"
|
||||
@click="changeModule(item)"
|
||||
>
|
||||
{{item.name}}
|
||||
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--metrics-->
|
||||
<div class="content-right" v-show="tableShow == 2">
|
||||
<div class="top-tools">
|
||||
<el-button-group>
|
||||
<el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
|
||||
</el-button>
|
||||
<el-button class="top-tool-btn top-tool top-tool-btn-active" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="metricsTableData"
|
||||
border
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
v-for="(item, index) in metricsTableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>
|
||||
</div>
|
||||
|
||||
<!--endpoint-->
|
||||
<div class="content-right" v-show="tableShow == 1">
|
||||
<div class="top-tools">
|
||||
<el-button-group>
|
||||
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
|
||||
</el-button>
|
||||
<el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
|
||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</button>
|
||||
<!--<el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
|
||||
<span><i class="el-icon-plus"></i></span>
|
||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||
</el-button>-->
|
||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="endpointTableData"
|
||||
border
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
v-for="(item, index) in endpointTableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
|
||||
<span v-else-if="item.prop == 'param'">
|
||||
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
|
||||
<span v-else-if="item.prop == 'state'">{{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('overall.option')" width="100">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div class="content-right-options">
|
||||
<span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
|
||||
<span @click.stop="toEditEndpoint(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
|
||||
</div>
|
||||
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
|
||||
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "project2",
|
||||
data() {
|
||||
return {
|
||||
tableShow: 1, // 1.endpoint; 2.metrics
|
||||
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
|
||||
endpointTableTitle: [
|
||||
{
|
||||
label: this.$t("project.endpoint.endpointId"),
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 110
|
||||
},{
|
||||
label: this.$t("project.endpoint.host"),
|
||||
prop: 'host',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.port"),
|
||||
prop: 'port',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.param"),
|
||||
prop: 'param',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.path"),
|
||||
prop: 'path',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("alert.list.state"),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.lastUpdate"),
|
||||
prop: 'lastUpdate',
|
||||
show: true,
|
||||
},{
|
||||
label: this.$t("project.endpoint.asset"),
|
||||
prop: 'asset',
|
||||
show: true,
|
||||
}
|
||||
],
|
||||
endpointTableData: [],
|
||||
endpointPageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total:0
|
||||
},
|
||||
metricsTableTitle: [
|
||||
{
|
||||
label: "ID",
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
label: this.$t("project.metrics.name"),
|
||||
prop: 'metric',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
label: this.$t("project.metrics.type"),
|
||||
prop: 'type',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
label: this.$t("project.metrics.description"),
|
||||
prop: 'help',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
metricsTableData: [],
|
||||
metricPageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
},
|
||||
moduleList: [],
|
||||
projectList: [],
|
||||
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
|
||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
|
||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
|
||||
endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
|
||||
metricSearchLabel: {moduleId: ''}, //metrics搜索参数
|
||||
endpointSearchMsg: { //给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 1,
|
||||
name: "ID",
|
||||
type: 'input',
|
||||
label: 'id',
|
||||
disabled: false
|
||||
}, {
|
||||
id: 11,
|
||||
name: this.$t('asset.asset'),
|
||||
type: 'asset',
|
||||
label: 'asset',
|
||||
disabled: false
|
||||
}],
|
||||
},
|
||||
metricSearchMsg: { //给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [{
|
||||
id: 12,
|
||||
name: 'Metric',
|
||||
type: 'input',
|
||||
label: 'metric',
|
||||
disabled: false
|
||||
}],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getEndpointTableData() {
|
||||
this.endpointSearchLabel.moduleId = this.currentModule.id;
|
||||
this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
|
||||
this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
|
||||
this.$get('endpoint', this.endpointSearchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
try {
|
||||
let tempObj = JSON.parse(response.data.list[i].param);
|
||||
response.data.list[i].paramObj = [];
|
||||
for (let k in tempObj) {
|
||||
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
|
||||
}
|
||||
} catch (err) {
|
||||
console.info(response.data.list[i], err);
|
||||
}
|
||||
}
|
||||
this.endpointTableData = response.data.list;
|
||||
this.endpointPageObj.total = response.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
getMetricsTableData() {
|
||||
this.metricSearchLabel.moduleId = this.currentModule.id;
|
||||
this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
|
||||
this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize);
|
||||
this.$get('metric', this.metricSearchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.metricsTableData = response.data.list;
|
||||
this.metricPageObj.total = response.data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
endpointPageNo(val) {
|
||||
this.endpointPageObj.pageNo = val;
|
||||
this.getEndpointTableData();
|
||||
},
|
||||
endpointPageSize(val) {
|
||||
this.endpointPageObj.pageSize = val;
|
||||
this.getEndpointTableData();
|
||||
},
|
||||
metricsPageNo(val) {
|
||||
this.metricPageObj.pageNo = val;
|
||||
this.getMetricsTableData();
|
||||
},
|
||||
metricsPageSize(val) {
|
||||
this.metricPageObj.pageSize = val;
|
||||
this.getMetricsTableData();
|
||||
},
|
||||
|
||||
// 获取左侧module列表数据
|
||||
getModuleList() {
|
||||
//若currentProject不存在（如页面刷新了），默认取project列表的第一个
|
||||
if (this.currentProject && this.currentProject.id) {
|
||||
this.$get('module', {projectId: this.currentProject.id, pageSize: 999, pageNo: 1}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.moduleList = response.data.list;
|
||||
for (let i = 0; i < this.moduleList.length; i++) {
|
||||
try {
|
||||
let tempObj = JSON.parse(this.moduleList[i].param);
|
||||
this.$set(this.moduleList[i], 'paramObj', []);
|
||||
for (let k in tempObj) {
|
||||
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
|
||||
}
|
||||
} catch (err) {
|
||||
console.info(response.data.list[i], err);
|
||||
}
|
||||
}
|
||||
if (this.moduleList.length > 0) {
|
||||
this.currentModule = this.moduleList[0];
|
||||
} else {
|
||||
this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this.projectList && this.projectList.length > 0) {
|
||||
this.$store.commit('setProject', this.projectList[0]);
|
||||
} else {
|
||||
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.projectList = response.data.list;
|
||||
if (this.projectList.length > 0) {
|
||||
this.getModuleList();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//左侧module列表选中切换
|
||||
changeModule(module) {
|
||||
this.currentModule = module;
|
||||
},
|
||||
|
||||
//弹出endpoint编辑页
|
||||
toEditEndpoint(endpoint) {
|
||||
this.rightBoxHandler(3);
|
||||
this.$refs.editEndpointBox.toEdit(true);
|
||||
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
|
||||
if (!this.editEndpoint.paramObj) {
|
||||
this.$set(this.editEndpoint, 'paramObj', []);
|
||||
}
|
||||
},
|
||||
|
||||
toCreateEndpoint() {
|
||||
this.$refs.addEndpointBox.show(true);
|
||||
this.$refs.addEndpointBox.clearEndpoints();
|
||||
},
|
||||
|
||||
//查看endpoint详情
|
||||
endpointDetail(endpoint) {
|
||||
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
|
||||
if (!this.editEndpoint.paramObj) {
|
||||
this.$set(this.editEndpoint, 'paramObj', []);
|
||||
}
|
||||
this.rightBoxHandler(3);
|
||||
this.$refs.editEndpointBox.toEdit(false);
|
||||
},
|
||||
|
||||
//弹出module编辑页
|
||||
toEditModule(module) {
|
||||
this.currentModule = JSON.parse(JSON.stringify(module));
|
||||
if (!this.currentModule.paramObj) {
|
||||
this.$set(this.currentModule, 'paramObj', []);
|
||||
}
|
||||
this.editModule = JSON.parse(JSON.stringify(module));
|
||||
if (!this.editModule.paramObj) {
|
||||
this.$set(this.editModule, 'paramObj', []);
|
||||
}
|
||||
this.rightBoxHandler(2);
|
||||
},
|
||||
|
||||
//搜索
|
||||
endpointSearch: function(searchObj) {
|
||||
this.endpointSearchLabel = {};
|
||||
for (let item in searchObj) {
|
||||
if (searchObj[item]) {
|
||||
this.$set(this.endpointSearchLabel, item, searchObj[item]);
|
||||
}
|
||||
}
|
||||
this.getEndpointTableData();
|
||||
},
|
||||
//搜索
|
||||
metricSearch: function(searchObj) {
|
||||
this.metricSearchLabel = {};
|
||||
for (let item in searchObj) {
|
||||
if (searchObj[item]) {
|
||||
this.$set(this.metricSearchLabel, item, searchObj[item]);
|
||||
}
|
||||
}
|
||||
this.getMetricsTableData();
|
||||
},
|
||||
|
||||
//控制弹框状态 type 1:project; 2:module; 3:editEndponit; 4:addEndpoint;
|
||||
rightBoxHandler(type) {
|
||||
if (type == 1) {
|
||||
this.$refs.projectBox.show(true);
|
||||
|
||||
if (this.$refs.moduleBox) {
|
||||
this.$refs.moduleBox.show(false);
|
||||
}
|
||||
if (this.$refs.editEndpointBox) {
|
||||
this.$refs.editEndpointBox.show(false);
|
||||
}
|
||||
//this.$refs.addEndpointBox.show(false);
|
||||
} else if (type == 2) {
|
||||
this.$refs.moduleBox.show(true);
|
||||
|
||||
if (this.$refs.projectBox) {
|
||||
this.$refs.projectBox.show(false);
|
||||
}
|
||||
if (this.$refs.editEndpointBox) {
|
||||
this.$refs.editEndpointBox.show(false);
|
||||
}
|
||||
//this.$refs.addEndpointBox.show(false);
|
||||
} else if (type == 3) {
|
||||
this.$refs.editEndpointBox.show(true);
|
||||
if (this.$refs.projectBox) {
|
||||
this.$refs.projectBox.show(false);
|
||||
}
|
||||
if (this.$refs.moduleBox) {
|
||||
this.$refs.moduleBox.show(false);
|
||||
}
|
||||
//this.$refs.addEndpointBox.show(false);
|
||||
} else if (type == 4) {
|
||||
}
|
||||
},
|
||||
|
||||
dateFormat(time) {
|
||||
if (!time) {
|
||||
return;
|
||||
}
|
||||
let date = new Date(time*1000);
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||||
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
|
||||
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.currentProject = this.$store.state.currentProject;
|
||||
this.getModuleList();
|
||||
this.getMetricsTableData();
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
this.getEndpointTableData();
|
||||
}, 200);
|
||||
},
|
||||
computed: {
|
||||
currentProjectChange() {
|
||||
return this.$store.state.currentProject;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentProjectChange(n, o) {
|
||||
this.currentProject = Object.assign({}, n);
|
||||
},
|
||||
currentProject(n, o) {
|
||||
this.getModuleList();
|
||||
},
|
||||
currentModule(n, o) {
|
||||
this.metricPageObj.pageNo = 1;
|
||||
this.endpointPageObj.pageNo = 1;
|
||||
if (n && n.id) {
|
||||
this.getEndpointTableData();
|
||||
this.getMetricsTableData();
|
||||
} else {
|
||||
this.endpointTableData = [];
|
||||
this.metricsTableData = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
height: 100%;
|
||||
}
|
||||
.content-right-option {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.content-right-option .el-icon-delete {
|
||||
color: #F98D9A;
|
||||
}
|
||||
.content-right-option .el-icon-delete:hover {
|
||||
color: #D96D7A;
|
||||
}
|
||||
.content-right-option .el-icon-view {
|
||||
color: #60BEFF;
|
||||
}
|
||||
.content-right-option .el-icon-view:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* start--param*/
|
||||
.param-btn {
|
||||
float: right;
|
||||
height: 27px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.param-btn-active {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.param-btn-active:hover, .param-btn-active:focus {
|
||||
background-color: #656565;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear {
|
||||
background-color: #D4D4D4;
|
||||
border: 1px solid #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
||||
background-color: #D4D4D4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.param-box {
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.param-box-endpoint {
|
||||
height: 325px;
|
||||
}
|
||||
.param-box-module {
|
||||
height: 227px;
|
||||
}
|
||||
.param-box-row {
|
||||
padding: 7px 0 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.param-box-row:last-of-type {
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.param-box-row-key, .param-box-row-value {
|
||||
display: inline-block;
|
||||
width: 41.5%;
|
||||
}
|
||||
.param-box-row-eq {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #c4c7cF;
|
||||
}
|
||||
.param-box-row-symbol {
|
||||
font-size: 12px;
|
||||
color: #c4c7cF;
|
||||
border: 1px solid #c4c7cF;
|
||||
text-align: center;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.param-box-row-symbol>i {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
/* end--param*/
|
||||
|
||||
/* begin--子弹框*/
|
||||
.right-sub-box {
|
||||
width: 380px;
|
||||
height: 520px;
|
||||
position: absolute;
|
||||
top: 380px;
|
||||
right: 100px;
|
||||
z-index: 2;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.right-sub-box .el-input-group {
|
||||
width: 227px;
|
||||
float: right;
|
||||
margin: 7px 0 0 0;
|
||||
}
|
||||
/* begin--搜索框*/
|
||||
.endpoint-asset-prepend {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.endpoint-asset-label {
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.endpoint-asset-dropdown {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
background-color: #656565;
|
||||
border-radius: 4px;
|
||||
width: 52px;
|
||||
left: 0;
|
||||
}
|
||||
.endpoint-asset-dropdown-item {
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
cursor: default;
|
||||
}
|
||||
.endpoint-asset-label-txt {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
text-align: center;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:first-of-type {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:last-of-type {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.endpoint-asset-dropdown-item:hover {
|
||||
background-color: #3a8ee6;
|
||||
}
|
||||
/* end--搜索框*/
|
||||
/* begin--table*/
|
||||
.endpoint-sub-table {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.line-100 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.endpoint-sub-table-head {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
}
|
||||
.endpoint-sub-table-row {
|
||||
line-height: 28px;
|
||||
height: 30px;
|
||||
color: #656565;
|
||||
}
|
||||
.endpoint-sub-table-row-active {
|
||||
background-color: #dadada;
|
||||
}
|
||||
.endpoint-sub-table-col {
|
||||
display: inline-block;
|
||||
width: 45%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.endpoint-sub-table-paginate-all {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 17px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
.endpoint-sub-table-body {
|
||||
font-size: 15px;
|
||||
}
|
||||
/* end--table*/
|
||||
|
||||
/* end--子弹框*/
|
||||
</style>
|
||||
<style>
|
||||
/* begin--覆盖分页组件样式*/
|
||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
||||
margin: 0 3px;
|
||||
min-width: 25px;
|
||||
}
|
||||
.right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
|
||||
margin: 0 3px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.right-sub-box .el-pager li {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #656565;
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
||||
background-color: white;
|
||||
}
|
||||
.right-sub-box .el-pagination button, .right-sub-box .el-pager li {
|
||||
border: 1px solid #DADADA;
|
||||
}
|
||||
.right-sub-box .el-pager li.active+li {
|
||||
border: 1px solid #DADADA;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
||||
color: black;
|
||||
}
|
||||
.right-sub-box .el-pagination.is-background .el-pager li.active:hover {
|
||||
color: white;
|
||||
}
|
||||
.endpoint-sub-table-paginate .el-pagination {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 13px;
|
||||
}
|
||||
.el-input-group__append>i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* end--覆盖分页组件样式*/
|
||||
</style>
|
||||
@@ -23,7 +23,7 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: '/project',
|
||||
component: resolve => require(['../components/page/project/project2.vue'], resolve),
|
||||
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/asset',
|
||||
|
||||
Reference in New Issue
Block a user