perf: 样式调整
1.登录页 2.一些小细节包括table、btn
This commit is contained in:
chenjinsong
@@ -6,10 +6,10 @@
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-box {
|
||||
height: 100%;
|
||||
@@ -57,23 +57,23 @@ html {
|
||||
}
|
||||
/*侧滑文字*/
|
||||
.el-form-item .el-form-item__label{
|
||||
font-size: 10px;
|
||||
text-align : left;
|
||||
font-size: 10px;
|
||||
text-align : left;
|
||||
}
|
||||
/*侧滑输入框高度*/
|
||||
.el-input .el-input__inner{
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
/*侧滑输入框宽度*/
|
||||
.right-menu .el-form-item__content .el-input{
|
||||
width: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
/* begin--按钮组件*/
|
||||
/* begin--按钮组件*/
|
||||
.nz-btn {
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
line-height: 21px;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
padding: 4px 14px;
|
||||
@@ -127,7 +127,7 @@ html {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
/* end--按钮组件*/
|
||||
/* end--按钮组件*/
|
||||
/* end--通用*/
|
||||
|
||||
/* begin--左侧列表*/
|
||||
@@ -172,15 +172,15 @@ html {
|
||||
margin-left: 270px;
|
||||
padding: 0 15px 0 25px;
|
||||
}
|
||||
/* begin--顶部工具栏*/
|
||||
/* begin--顶部工具栏*/
|
||||
.top-tools {
|
||||
padding: 22px 0 13px 0;
|
||||
}
|
||||
.top-tools .top-tool-search {
|
||||
width: 320px;
|
||||
}
|
||||
/* end--顶部工具栏*/
|
||||
/* start--内容*/
|
||||
/* end--顶部工具栏*/
|
||||
/* start--内容*/
|
||||
.content-right>.el-table{
|
||||
border: 1px solid #d4d4d4;
|
||||
border-left: none;
|
||||
@@ -205,21 +205,27 @@ html {
|
||||
border-left: 1px solid white;
|
||||
border-bottom: 1px solid #d4d4d4;;
|
||||
}
|
||||
.content-right .el-table .el-table__header th:first-of-type {
|
||||
border-left: none;
|
||||
}
|
||||
.content-right .el-table .el-table__header th:nth-last-child(2) {
|
||||
border-right: none;
|
||||
}
|
||||
.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--分页*/
|
||||
/* end--内容*/
|
||||
/* start--分页*/
|
||||
.pagination {
|
||||
padding-top: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
/* end--分页*/
|
||||
/* end--分页*/
|
||||
|
||||
/* begin--右弹框滑入滑出动画*/
|
||||
/* begin--右弹框滑入滑出动画*/
|
||||
@keyframes slide-in-from-right {
|
||||
from {right: -800px}
|
||||
to {right: 0}
|
||||
@@ -234,9 +240,9 @@ html {
|
||||
.right-box-leave-active {
|
||||
animation: slide-out-to-right 0.4s;
|
||||
}
|
||||
/* end--右弹框滑入滑出动画*/
|
||||
/* end--右弹框滑入滑出动画*/
|
||||
|
||||
/* begin--右子弹框动画*/
|
||||
/* begin--右子弹框动画*/
|
||||
@keyframes appear {
|
||||
from {opacity:0}
|
||||
to {opacity:1}
|
||||
@@ -251,7 +257,7 @@ html {
|
||||
.right-sub-box-leave-active {
|
||||
animation: disappear 0.4s;
|
||||
}
|
||||
/* end--右子弹框动画*/
|
||||
/* end--右子弹框动画*/
|
||||
/* end--右侧内容*/
|
||||
|
||||
/* begin--右侧弹框*/
|
||||
@@ -266,8 +272,8 @@ html {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
|
||||
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint ,.right-box-panel {
|
||||
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
|
||||
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint {
|
||||
width: 520px;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
@@ -275,7 +281,7 @@ html {
|
||||
width: 820px;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
/* begin--右侧弹框--顶部按钮*/
|
||||
/* begin--右侧弹框--顶部按钮*/
|
||||
.right-box-top-btns {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -298,9 +304,9 @@ html {
|
||||
border-top: none;
|
||||
color: white;
|
||||
}
|
||||
/* end--右侧弹框--顶部按钮*/
|
||||
/* end--右侧弹框--顶部按钮*/
|
||||
|
||||
/* begin--右侧弹框--内容*/
|
||||
/* begin--右侧弹框--内容*/
|
||||
.right-box-title {
|
||||
height: 30px;
|
||||
line-height: 40px;
|
||||
@@ -362,9 +368,9 @@ html {
|
||||
.right-box-row-btn-active:hover {
|
||||
border: 1px solid #656565;
|
||||
}
|
||||
/* end--右侧弹框--内容*/
|
||||
/* end--右侧弹框--内容*/
|
||||
|
||||
/* begin--右侧弹框--底部按钮*/
|
||||
/* begin--右侧弹框--底部按钮*/
|
||||
.right-box-bottom-btns {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -399,7 +405,7 @@ html {
|
||||
.right-box-bottom-btn-50 {
|
||||
width: 50%;
|
||||
}
|
||||
/* end--右侧弹框--底部按钮*/
|
||||
/* end--右侧弹框--底部按钮*/
|
||||
/* end--右侧弹框*/
|
||||
/* begin--endpoint->子弹框asset搜索框前缀和后缀*/
|
||||
.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend {
|
||||
|
||||
6
nezha-fronted/src/assets/img/lang-box-active.svg
Normal file
6
nezha-fronted/src/assets/img/lang-box-active.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="27px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1090 -737 )">
|
||||
<path d="M 30 19.5943053208275 C 29.9711583333333 20.9438560308555 28.8528894086021 22.0377313464236 27.4734765591398 22.0377313464236 L 26.2247422311828 22.0377313464236 L 26.2247422311828 24.4810323018934 C 26.2247422311828 25.830374526648 25.1063028225806 26.9242915497896 23.7271030913979 27 L 2.49738341397849 27 C 1.1181410483871 26.9242081609397 0 25.830374526648 0 24.4809489130435 L 0 7.37788393232819 C 0 6.0285 1.11809841397849 4.93466636570827 2.49738341397849 4.93466639200561 L 3.74624561827957 4.93466639200561 L 3.74624561827957 2.4912403401122 C 3.74624561827957 1.14168963008415 4.86438666666667 0.0480227734922861 6.24397 0 L 27.4735191935484 0 C 28.8529320430108 0.0480227734922861 29.9712435752688 1.14168963008415 30 2.4912403401122 L 30 19.5943053208275 Z M 23.7271456989247 6.15621261395512 L 2.49738341397849 6.15621261395512 C 1.8077622311828 6.15621261395512 1.24869169354839 6.70312944424965 1.24869172043011 7.37788393232819 L 1.24869172043011 24.4809489130435 C 1.24869172043011 25.1555783309958 1.80776225806452 25.7026619389902 2.49738341397849 25.7026619389902 L 23.7271456989247 25.7026619389902 C 24.4167668817204 25.7026619389902 24.9758374193548 25.1555783309958 25 24.4809489130435 L 25 7.37788393232819 C 24.9758374193548 6.70312941795231 24.4167668817204 6.15621261395512 23.7271456989247 6.15621261395512 Z M 28.7223387634409 2.4912403401122 C 28.7223387634409 1.81648582573633 28.1632682258065 1.26969409186536 27.4734765591398 1.26969411816269 L 6.24392739247312 1.26969411816269 C 5.55409309139785 1.26969411816269 4.99502258064516 1.81648585203366 4.99502258064516 2.4912403401122 L 4.99502258064516 5 L 23.7271456989247 5 C 25.1064306989247 4.93466639200561 26.2249553494624 6.02850002629734 26 7.37788393232819 L 26 20.8159766392006 L 27.4736470698925 20.8159766392006 C 28.1632682526882 20.8159766392006 28.7223387903226 20.2688930312062 28.7223387634409 19.5943053208275 L 28.7223387634409 2.49107356241234 Z " fill-rule="nonzero" fill="#31759c" stroke="none" transform="matrix(1 0 0 1 1090 737 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
nezha-fronted/src/assets/img/lang-box.svg
Normal file
6
nezha-fronted/src/assets/img/lang-box.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="29px" height="27px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1134 -737 )">
|
||||
<path d="M 29 19.5943053208275 C 28.9721197222222 20.9438560308555 27.8911264283154 22.0377313464236 26.5576940071685 22.0377313464236 L 25.35058415681 22.0377313464236 L 25.35058415681 24.4810323018934 C 25.35058415681 25.830374526648 24.269426061828 26.9242915497896 22.9361996550179 27 L 2.41413730017921 27 C 1.08086968010753 26.9242081609397 0 25.830374526648 0 24.4809489130435 L 0 7.37788393232819 C 0 6.0285 1.08082846684588 4.93466636570827 2.41413730017921 4.93466639200561 L 3.62137076433692 4.93466639200561 L 3.62137076433692 2.4912403401122 C 3.62137076433692 1.14168963008415 4.70224044444445 0.0480227734922861 6.03583766666667 0 L 26.5577352204301 0 C 27.8911676415771 0.0480227734922861 28.9722021227599 1.14168963008415 29 2.4912403401122 L 29 19.5943053208275 Z M 22.9362408422939 6.15621261395512 L 2.41413730017921 6.15621261395512 C 1.74750349014337 6.15621261395512 1.20706863709677 6.70312944424965 1.20706866308244 7.37788393232819 L 1.20706866308244 24.4809489130435 C 1.20706866308244 25.1555783309958 1.74750351612903 25.7026619389902 2.41413730017921 25.7026619389902 L 22.9362408422939 25.7026619389902 C 23.6028746523297 25.7026619389902 24.1433095053763 25.1555783309958 24 24.4809489130435 L 24 7.37788393232819 C 24.1433095053763 6.70312941795231 23.6028746523297 6.15621261395512 22.9362408422939 6.15621261395512 Z M 27.7649274713262 2.4912403401122 C 27.7649274713262 1.81648582573633 27.2244926182796 1.26969409186536 26.5576940071685 1.26969411816269 L 6.03579647939068 1.26969411816269 C 5.36895665501792 1.26969411816269 4.82852182795699 1.81648585203366 4.82852182795699 2.4912403401122 L 4.82852182795699 5 L 22.9362408422939 5 C 24.2695496756272 4.93466639200561 25.350790171147 6.02850002629734 25 7.37788393232819 L 25 20.8159766392006 L 26.5578588342294 20.8159766392006 C 27.2244926442652 20.8159766392006 27.7649274973118 20.2688930312062 27.7649274713262 19.5943053208275 L 27.7649274713262 2.49107356241234 Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.603921568627451" transform="matrix(1 0 0 1 1134 737 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
nezha-fronted/src/assets/img/login-background.png
Normal file
BIN
nezha-fronted/src/assets/img/login-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
@@ -1,417 +1,433 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="submenu">
|
||||
<el-menu
|
||||
class="nz-menu"
|
||||
mode="horizontal"
|
||||
background-color="#232f3e"
|
||||
text-color="#ffffff"
|
||||
unique-opened
|
||||
>
|
||||
<el-submenu index="0" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div class="menu-create">
|
||||
<i class="el-icon-plus"></i>
|
||||
<div>{{$t('overall.create')}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in createMenu">
|
||||
<el-menu-item :index="'0-' + index">
|
||||
<div @click="createBox(item)">
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="1" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="1-0">
|
||||
<div @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-1">
|
||||
<div @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="2" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in projectData">
|
||||
<el-menu-item :index="'2-' + index">
|
||||
<div @click="jumpToProject(item)">
|
||||
<span>{{item.name}}</span>
|
||||
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="el-icon-edit-outline"></i></div>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="3" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in assetData">
|
||||
<el-menu-item :index="'3-' + index">
|
||||
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="4-0" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="4-1">
|
||||
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4-2">
|
||||
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="5" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="5-0">
|
||||
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-1">
|
||||
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
<div class="header">
|
||||
<div class="submenu">
|
||||
<el-menu
|
||||
class="nz-menu"
|
||||
mode="horizontal"
|
||||
background-color="#232f3e"
|
||||
text-color="#ffffff"
|
||||
unique-opened
|
||||
>
|
||||
<el-submenu index="0" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div class="menu-create">
|
||||
<i class="el-icon-plus"></i>
|
||||
<div>{{$t('overall.create')}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in createMenu">
|
||||
<el-menu-item :index="'0-' + index">
|
||||
<div @click="createBox(item)">
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-menu-item index="1" @click="jumpTo('dashboard')">
|
||||
<div>
|
||||
{{$t('overall.dashboard')}}
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<el-submenu index="2" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in projectData">
|
||||
<el-menu-item :index="'2-' + index">
|
||||
<div @click="jumpToProject(item)">
|
||||
<span>{{item.name}}</span>
|
||||
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="el-icon-edit-outline"></i></div>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="3" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
|
||||
</template>
|
||||
<template v-for="(item, index) in assetData">
|
||||
<el-menu-item :index="'3-' + index">
|
||||
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="4-0" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="4-1">
|
||||
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4-2">
|
||||
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="5" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="5-0">
|
||||
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-1">
|
||||
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<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
|
||||
placement="bottom"
|
||||
title=""
|
||||
width="200"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="userout">
|
||||
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
|
||||
<p>English</p>
|
||||
</div>
|
||||
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
|
||||
<p>简体</p>
|
||||
</div>
|
||||
<div style="cursor:no-drop;color:#a6a6a6">
|
||||
<p>русский</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sign-out" @click="jumpTo('')">
|
||||
退出登录
|
||||
</div>
|
||||
<div slot="reference" class="user-avator">
|
||||
<span>用户名</span>
|
||||
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>
|
||||
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<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 class="nz-menu-line" @click.stop index="6-2">
|
||||
<div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="6-3">
|
||||
<div @click="logout">{{$t('overall.signOut')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
<!--<div class="header-user-con">
|
||||
<div class="flagselect">
|
||||
</div>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title=""
|
||||
width="200"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="userout">
|
||||
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
|
||||
<p>English</p>
|
||||
</div>
|
||||
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
|
||||
<p>简体</p>
|
||||
</div>
|
||||
<div style="cursor:no-drop;color:#a6a6a6">
|
||||
<p>русский</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sign-out" @click="jumpTo('')">
|
||||
退出登录
|
||||
</div>
|
||||
<div slot="reference" class="user-avator">
|
||||
<span>用户名</span>
|
||||
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>
|
||||
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
language: localStorage.getItem("language"),
|
||||
assetData: [],
|
||||
projectData: [], //顶部菜单project列表中的数据
|
||||
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
||||
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
|
||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
|
||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
|
||||
editEndpoint: { //新增/编辑的endpoint
|
||||
id: '',
|
||||
host: '',
|
||||
port: '',
|
||||
param: '',
|
||||
path: '',
|
||||
asset: {id: '', name: '', host: ''},
|
||||
project: {id: '', name: ''},
|
||||
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
|
||||
moduleId: '',
|
||||
assetId: ''
|
||||
},
|
||||
alertRule: {
|
||||
id: '',
|
||||
alertName: '',
|
||||
type: '',
|
||||
linkObject: {id: '', name: ''},
|
||||
linkId: '',
|
||||
expr: '',
|
||||
last: '',
|
||||
severity: '',
|
||||
summary: '',
|
||||
description: '',
|
||||
receiver: '',
|
||||
},
|
||||
createMenu: [ //新增按钮内容
|
||||
{
|
||||
label: this.$t('project.project.createProject'),
|
||||
url: 'project',
|
||||
type: 1
|
||||
export default {
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
username: sessionStorage.getItem("nz-username"),
|
||||
language: localStorage.getItem("nz-language"),
|
||||
assetData: [],
|
||||
projectData: [], //顶部菜单project列表中的数据
|
||||
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
||||
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
|
||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
|
||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
|
||||
editEndpoint: { //新增/编辑的endpoint
|
||||
id: '',
|
||||
host: '',
|
||||
port: '',
|
||||
param: '',
|
||||
path: '',
|
||||
asset: {id: '', name: '', host: ''},
|
||||
project: {id: '', name: ''},
|
||||
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
|
||||
moduleId: '',
|
||||
assetId: ''
|
||||
},
|
||||
{
|
||||
label: this.$t('project.module.createModule'),
|
||||
url: 'project',
|
||||
type: 2
|
||||
alertRule: {
|
||||
id: '',
|
||||
alertName: '',
|
||||
type: '',
|
||||
linkObject: {id: '', name: ''},
|
||||
linkId: '',
|
||||
expr: '',
|
||||
last: '',
|
||||
severity: '',
|
||||
summary: '',
|
||||
description: '',
|
||||
receiver: '',
|
||||
},
|
||||
{
|
||||
label: this.$t('project.endpoint.createEndpoint'),
|
||||
url: 'project',
|
||||
type: 3
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.createAsset'),
|
||||
url: 'asset',
|
||||
type: 4
|
||||
},
|
||||
{
|
||||
label: this.$t('alert.config.createAlertConfig'),
|
||||
url: 'alertConfig',
|
||||
type: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jumpTo(data) {
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
createBox(item) {
|
||||
if (item.type == 1) {
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = {id: '', name: '', remark: ''};
|
||||
} else if (item.type == 2) {
|
||||
this.$refs.moduleBox.show(true);
|
||||
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
|
||||
} else if (item.type == 3) {
|
||||
this.$refs.addEndpointBox.show(true);
|
||||
this.$refs.addEndpointBox.clearEndpoints();
|
||||
} else if (item.type == 5) {
|
||||
this.$refs.alertConfigBox.show(true, true);
|
||||
createMenu: [ //新增按钮内容
|
||||
{
|
||||
label: this.$t('project.project.createProject'),
|
||||
url: 'project',
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
label: this.$t('project.module.createModule'),
|
||||
url: 'project',
|
||||
type: 2
|
||||
},
|
||||
{
|
||||
label: this.$t('project.endpoint.createEndpoint'),
|
||||
url: 'project',
|
||||
type: 3
|
||||
},
|
||||
{
|
||||
label: this.$t('asset.createAsset'),
|
||||
url: 'asset',
|
||||
type: 4
|
||||
},
|
||||
{
|
||||
label: this.$t('alert.config.createAlertConfig'),
|
||||
url: 'alertConfig',
|
||||
type: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
jumpToAsset(data, id) {
|
||||
this.$store.state.assetData.moduleData = data;
|
||||
this.$store.state.assetData.selectedData = id;
|
||||
this.jumpTo(data);
|
||||
},
|
||||
jumpToProject(p) {
|
||||
this.currentProject = p;
|
||||
this.$store.commit('setProject', p);
|
||||
this.jumpTo('project');
|
||||
},
|
||||
changeLocal(lang) {
|
||||
localStorage.setItem("language", lang);
|
||||
window.location.reload();
|
||||
},
|
||||
getAssetData() {
|
||||
this.$get('idc', this.pageObj).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.assetData = response.data.list
|
||||
methods: {
|
||||
jumpTo(data) {
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
createBox(item) {
|
||||
if (item.type == 1) {
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = {id: '', name: '', remark: ''};
|
||||
} else if (item.type == 2) {
|
||||
this.$refs.moduleBox.show(true);
|
||||
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
|
||||
} else if (item.type == 3) {
|
||||
this.$refs.addEndpointBox.show(true);
|
||||
this.$refs.addEndpointBox.clearEndpoints();
|
||||
} else if (item.type == 5) {
|
||||
this.$refs.alertConfigBox.show(true, true);
|
||||
}
|
||||
})
|
||||
},
|
||||
getProjectList() {
|
||||
this.$get('project', {}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.projectData = response.data.list;
|
||||
let flag = false;
|
||||
//如果currentProject不在新取到的数据里，说明它被删了
|
||||
for (let i = 0; i < this.projectData.length; i++) {
|
||||
if (this.projectData[i].id == this.currentProject.id) {
|
||||
flag = true;
|
||||
break;
|
||||
},
|
||||
jumpToAsset(data, id) {
|
||||
this.$store.state.assetData.moduleData = data;
|
||||
this.$store.state.assetData.selectedData = id;
|
||||
this.jumpTo(data);
|
||||
},
|
||||
jumpToProject(p) {
|
||||
this.currentProject = p;
|
||||
this.$store.commit('setProject', p);
|
||||
this.jumpTo('project');
|
||||
},
|
||||
changeLocal(lang) {
|
||||
if (lang != localStorage.getItem("nz-language")) {
|
||||
localStorage.setItem("nz-language", lang);
|
||||
window.location.reload();
|
||||
}
|
||||
},
|
||||
getAssetData() {
|
||||
this.$get('idc', this.pageObj).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.assetData = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
getProjectList() {
|
||||
this.$get('project', {}).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.projectData = response.data.list;
|
||||
let flag = false;
|
||||
//如果currentProject不在新取到的数据里，说明它被删了
|
||||
for (let i = 0; i < this.projectData.length; i++) {
|
||||
if (this.projectData[i].id == this.currentProject.id) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!flag && this.projectData.length > 0) {
|
||||
this.currentProject = this.projectData[0];
|
||||
this.$store.commit('setProject', this.currentProject);
|
||||
}
|
||||
}
|
||||
if (!flag && this.projectData.length > 0) {
|
||||
this.currentProject = this.projectData[0];
|
||||
this.$store.commit('setProject', this.currentProject);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
toEditProject(p) {
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = Object.assign({}, p);
|
||||
},
|
||||
projectReload() {
|
||||
this.getProjectList();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAssetData();
|
||||
this.getProjectList();
|
||||
},
|
||||
computed: {
|
||||
projectListReloadWatch() {
|
||||
return this.$store.state.projectListReload;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
projectListReloadWatch(n, o) {
|
||||
if (n) {
|
||||
})
|
||||
},
|
||||
toEditProject(p) {
|
||||
this.$refs.projectBox.show(true);
|
||||
this.editProject = Object.assign({}, p);
|
||||
},
|
||||
projectReload() {
|
||||
this.getProjectList();
|
||||
this.$store.commit('projectListChange', false);
|
||||
},
|
||||
logout() {
|
||||
this.$get('logout');
|
||||
this.jumpTo('login');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!localStorage.getItem("nz-language")) {
|
||||
localStorage.setItem("nz-language", "en");
|
||||
}
|
||||
this.language = localStorage.getItem("nz-language");
|
||||
},
|
||||
mounted() {
|
||||
this.getAssetData();
|
||||
this.getProjectList();
|
||||
},
|
||||
computed: {
|
||||
projectListReloadWatch() {
|
||||
return this.$store.state.projectListReload;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
projectListReloadWatch(n, o) {
|
||||
if (n) {
|
||||
this.getProjectList();
|
||||
this.$store.commit('projectListChange', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-menu.el-menu--horizontal{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item.is-active{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
|
||||
.el-menu--horizontal>.el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
border-bottom: 0px;
|
||||
color: white;
|
||||
}
|
||||
.el-menu--horizontal.nz-submenu {
|
||||
border: 1px solid #bbbbbb;
|
||||
border-top: none;
|
||||
}
|
||||
.nz-submenu .el-menu--popup {
|
||||
background-color: white !important;
|
||||
}
|
||||
.nz-submenu .el-menu--popup .el-menu-item {
|
||||
background-color: white !important;
|
||||
}
|
||||
.nz-submenu .el-menu--popup-bottom-start {
|
||||
margin-top: 0;
|
||||
}
|
||||
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
|
||||
padding: 0 20px;
|
||||
color: #444444 !important;
|
||||
transition: none;
|
||||
}
|
||||
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
|
||||
color: #ff9900 !important;
|
||||
}
|
||||
.el-submenu__title .el-icon-plus {
|
||||
color: white;
|
||||
}
|
||||
.el-menu-item>div, .el-menu-item>div>div {
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-menu.el-menu--horizontal{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
.el-menu--horizontal>.el-menu-item.is-active{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
|
||||
.el-menu--horizontal>.el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
border-bottom: 0px;
|
||||
color: white;
|
||||
}
|
||||
.el-menu--horizontal.nz-submenu {
|
||||
border: 1px solid #bbbbbb;
|
||||
border-top: none;
|
||||
}
|
||||
.nz-submenu .el-menu--popup {
|
||||
background-color: white !important;
|
||||
}
|
||||
.nz-submenu .el-menu--popup .el-menu-item {
|
||||
background-color: white !important;
|
||||
}
|
||||
.nz-submenu .el-menu--popup-bottom-start {
|
||||
margin-top: 0;
|
||||
}
|
||||
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
|
||||
padding: 0 20px;
|
||||
color: #444444 !important;
|
||||
transition: none;
|
||||
}
|
||||
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
|
||||
color: #ff9900 !important;
|
||||
}
|
||||
.el-submenu__title .el-icon-plus {
|
||||
color: white;
|
||||
}
|
||||
.el-menu-item>div, .el-menu-item>div>div {
|
||||
font-size: 15px;
|
||||
}
|
||||
.nz-menu-line {
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 18px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.submenu {
|
||||
.submenu {
|
||||
padding-left: 50%;
|
||||
width: 500px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #232f3e;
|
||||
z-index: 510;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
.user-avator {
|
||||
padding: 0 5px 3px 0;
|
||||
margin-left: 20px;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avator:hover {
|
||||
.user-avator:hover {
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.user-avator span {
|
||||
font-size: 16px;
|
||||
margin: 0 5px;
|
||||
color: white;
|
||||
}
|
||||
.user-avator span {
|
||||
font-size: 16px;
|
||||
margin: 0 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-avator i.iconfont {
|
||||
.user-avator i.iconfont {
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
transform: translateY(2.5px);
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.userout {
|
||||
.userout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.userout > div {
|
||||
.userout > div {
|
||||
width: 33.3%;
|
||||
color: rgba(51, 137, 185, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-out {
|
||||
.sign-out {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
@@ -420,28 +436,28 @@ export default {
|
||||
background: rgba(51, 137, 185, 1);
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.sign-out:hover {
|
||||
.sign-out:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.nz-menu>li:first-of-type {
|
||||
position: fixed;
|
||||
left: 40%;
|
||||
top: 0;
|
||||
}
|
||||
.menu-create {
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.menu-create .el-icon-plus {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.menu-edit {
|
||||
line-height: 36px;
|
||||
float: right;
|
||||
}
|
||||
.nz-menu>li:first-of-type {
|
||||
position: fixed;
|
||||
left: 40%;
|
||||
top: 0;
|
||||
}
|
||||
.menu-create {
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.menu-create .el-icon-plus {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
.menu-edit {
|
||||
line-height: 36px;
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@ import messages from './language'
|
||||
Vue.use(VueI18n)
|
||||
//从localStorage获取语言选择。
|
||||
const i18n = new VueI18n({
|
||||
locale: localStorage.language || 'en', //初始未选择默认 en 英文
|
||||
locale: localStorage.getItem('nz-language') || 'en', //初始未选择默认 en 英文
|
||||
messages,
|
||||
})
|
||||
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
|
||||
|
||||
@@ -1,27 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class='login-right'>
|
||||
<div class="login-content">
|
||||
<div class="login-title">
|
||||
<h1>NeZha</h1>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="login-input" style="margin-top: 20px;">
|
||||
<input v-model="loginData.username" class="inputL" placeholder="username" ></input>
|
||||
</div>
|
||||
|
||||
<div class="login-input">
|
||||
<input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
|
||||
</div>
|
||||
<div class="login-button">
|
||||
<button @click="login">登录</button>
|
||||
</div>
|
||||
<div class="login">
|
||||
<div class="model">
|
||||
<div class='login-right'>
|
||||
<div class="login-content">
|
||||
<div class="login-title">NEZHA</div>
|
||||
<div class="login-label" style="padding-top: 35px;">User Name</div>
|
||||
<div class="login-input">
|
||||
<input v-model="loginData.username" class="inputL"></input>
|
||||
</div>
|
||||
<div class="login-label">Password</div>
|
||||
<div class="login-input">
|
||||
<input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login"></input>
|
||||
</div>
|
||||
<div class="login-button">
|
||||
<button @click="login">Login</button>
|
||||
</div>
|
||||
<div class="login-foot">
|
||||
<div class="login-foot-remember"></div>
|
||||
<div class="login-foot-langs">
|
||||
<div @click="changeLang('en')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'en'}">
|
||||
<img v-if="lang == 'en'" src="../../assets/img/lang-box-active.svg"/>
|
||||
<img v-if="lang != 'en'" src="../../assets/img/lang-box.svg"/>
|
||||
<span class="lang-name lang-name-en">EN</span>
|
||||
<div v-if="lang == 'en'" class="lang-active-model"></div>
|
||||
</div>
|
||||
<div @click="changeLang('cn')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'cn'}">
|
||||
<img v-if="lang == 'cn'" src="../../assets/img/lang-box-active.svg"/>
|
||||
<img v-if="lang != 'cn'" src="../../assets/img/lang-box.svg"/>
|
||||
<span class="lang-name">中</span>
|
||||
<div v-if="lang == 'cn'" class="lang-active-model"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "login",
|
||||
data() {
|
||||
@@ -29,14 +47,17 @@ export default {
|
||||
loginData: {
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false
|
||||
},
|
||||
lang: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.$post('sys/login', (this.loginData)).then(res => {
|
||||
if (res.code == 200) {
|
||||
sessionStorage.setItem("token", res.data.token);
|
||||
sessionStorage.setItem("nz-token", res.data.token);
|
||||
sessionStorage.setItem("nz-username", this.loginData.username);
|
||||
this.$router.push({
|
||||
path: "/dashboard",
|
||||
query: {
|
||||
@@ -46,81 +67,130 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
changeLang(lang) {
|
||||
if (this.lang == lang) {
|
||||
return;
|
||||
} else {
|
||||
localStorage.setItem("nz-language", lang);
|
||||
this.lang = lang;
|
||||
this.$i18n.locale = lang;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login {
|
||||
background-image: url("../../assets/img/login-background.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.model {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.737);
|
||||
}
|
||||
button {
|
||||
width:180px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 12px;
|
||||
background: #17558e !important;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
width: 80%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 12px;
|
||||
background: #31759c;
|
||||
border-radius: 270px;
|
||||
font-size: 18px;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #5c9fc4;
|
||||
}
|
||||
|
||||
.login-right {
|
||||
width: 400px;
|
||||
height: 330px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-60%);
|
||||
right: 42%;
|
||||
background: #356b9d;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
height: 475px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding: 250px 0 0 0;
|
||||
}
|
||||
.login-title {
|
||||
position: absolute;
|
||||
font-size: 90px;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.login-label {
|
||||
margin-left: 10%;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.login-input {
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px;
|
||||
height: 30px;
|
||||
margin: 28px 0 16px 10%;
|
||||
width: 80%;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.login-foot {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-foot>div {
|
||||
display: inline-block;
|
||||
}
|
||||
.login-foot-langs {
|
||||
float: right;
|
||||
padding-right: 10%;
|
||||
}
|
||||
.login-foot-lang {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.lang-active-model {
|
||||
width: 19px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
background-color: rgba(49, 117, 156, 0.27);
|
||||
top: 8px;
|
||||
left: 9px;
|
||||
}
|
||||
.lang-name {
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 7px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #656565;
|
||||
}
|
||||
.lang-name-en {
|
||||
left: 4px;
|
||||
}
|
||||
.login-foot-lang-active .lang-name {
|
||||
color: #31759c;
|
||||
}
|
||||
|
||||
.login-input input {
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.login-content .login-title{
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-content .login-title h1{
|
||||
color: rgb(23, 85, 142);
|
||||
font-size: 26px;
|
||||
}
|
||||
.login-content .login-title div{
|
||||
width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
height: 1px;
|
||||
background: #507faa;
|
||||
}
|
||||
.login-content .login-content{
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.login-input{
|
||||
border: 2px solid #507faa;
|
||||
width: 70%;
|
||||
margin-left: 10%;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -267,6 +267,7 @@
|
||||
methods: {
|
||||
show(show) {
|
||||
this.rightBox.show = show;
|
||||
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
|
||||
},
|
||||
|
||||
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint
|
||||
|
||||
@@ -56,9 +56,9 @@
|
||||
</div>-->
|
||||
|
||||
<!-- begin--底部按钮-->
|
||||
<div class="right-box-bottom-btns">
|
||||
<!--<div class="right-box-bottom-btns">
|
||||
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- end--底部按钮-->
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@@ -1022,14 +1022,14 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
|
||||
line-height: 31px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.new-search .search-input-all{
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
color: rgba(0,0,0,.55);
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
display: flex;
|
||||
@@ -1042,8 +1042,8 @@
|
||||
}
|
||||
.search-input-all .search-history{
|
||||
padding: 0px 10px;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
margin-top: 4px;
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
|
||||
@@ -177,6 +177,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
@@ -382,7 +383,7 @@ export default {
|
||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||
this.$get('sys/user/list', this.searchLabel).then(response => {
|
||||
if (response.code === 200) {
|
||||
for (var i = 0; i < response.data.list.length; i++) {
|
||||
for (let i = 0; i < response.data.list.length; i++) {
|
||||
response.data.list[i].status = response.data.list[i].status + "";
|
||||
}
|
||||
this.tableData = response.data.list;
|
||||
@@ -459,7 +460,7 @@ export default {
|
||||
}
|
||||
},
|
||||
blurEditReceiver: function() {
|
||||
for (var i = 0; i < this.receiverData.length; i++) {
|
||||
for (let i = 0; i < this.receiverData.length; i++) {
|
||||
if (this.receiverData[i].isEdit) {
|
||||
this.receiverData[i].name = this.receiverData[i].oldName;
|
||||
this.receiverData[i].isEdit = false;
|
||||
@@ -473,7 +474,7 @@ export default {
|
||||
//TODO 请求后台，删除用户组
|
||||
},
|
||||
initReceiverData: function() {
|
||||
for (var i = 0; i < this.receiverData.length; i++) {
|
||||
for (let i = 0; i < this.receiverData.length; i++) {
|
||||
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
||||
this.$set(this.receiverData[i], 'isEdit', false);
|
||||
}
|
||||
@@ -483,7 +484,7 @@ export default {
|
||||
},
|
||||
updateReceiverName: function(item) {
|
||||
//TODO 请求接口改名
|
||||
var code = 200;
|
||||
let code = 200;
|
||||
//this.$set(item, 'errorMessage', 'err');
|
||||
item.errorMessage = '';
|
||||
item.oldName = item.name;
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
@@ -97,7 +98,7 @@
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('config.account.option')" width="100">
|
||||
<el-table-column :resizable="false" :label="$t('config.account.option')" width="100">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div class="content-right-options">
|
||||
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in metricsTableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
@@ -70,6 +71,7 @@
|
||||
height="calc(100% - 65px)"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in endpointTableTitle"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
@@ -86,7 +88,7 @@
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('overall.option')" width="100">
|
||||
<el-table-column :resizable="false" :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>
|
||||
|
||||
@@ -11,7 +11,7 @@ axios.interceptors.request.use(config => {
|
||||
// "Content-Type": 'application/x-www-form-urlencoded',
|
||||
// }
|
||||
// config.data = qs.stringify(config.data);
|
||||
let token = sessionStorage.getItem('token')
|
||||
let token = sessionStorage.getItem('nz-token')
|
||||
if (token) {
|
||||
config.headers['Authorization'] = token //请求头token
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user