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

perf: 菜单改版，account数据列表布局改版；css变量提取等；

Browse Source
This commit is contained in:
chenjinsong
2021-04-07 09:58:34 +08:00
parent 7648b3868d
commit 8d41ec6cdb
39 changed files with 2239 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/build/utils.js
View File

@@ -65,7 +65,7 @@ exports.cssLoaders = function (options) {
{ {
loader: 'sass-resources-loader', loader: 'sass-resources-loader',
options: { options: {
resources: path.resolve(__dirname, '../src/assets/stylus/index.scss') resources: path.resolve(__dirname, '../src/assets/css/main.scss')
} }
} }
), ),

5
nezha-fronted/src/assets/css/main.css → nezha-fronted/src/assets/css/common.scss
View File

@@ -1,7 +1,8 @@
@font-face { @font-face {
font-family: 'NotoSans'; /*字体名称*/ font-family: 'NotoSans'; /*字体名称*/
src: url('font/NotoSansSC-6.ttf'); src: url('~@/assets/css/font/NotoSansSC-6.ttf');
} }
/* 覆盖element的loading样式 */
.el-loading-spinner .circular{ .el-loading-spinner .circular{
width: 42px; width: 42px;
height: 42px; height: 42px;
@@ -9,7 +10,7 @@
display: none; display: none;
} }
.el-loading-mask .el-loading-spinner{ .el-loading-mask .el-loading-spinner{
background: url(../img/loading.gif) no-repeat; background: url(~@/assets/img/loading.gif) no-repeat;
background-size: 48px 48px; background-size: 48px 48px;
width: 48px; width: 48px;
height: 48px; height: 48px;

205
nezha-fronted/src/assets/css/common/tableCommon.scss Normal file
View File

@@ -0,0 +1,205 @@
/*列表table通用样式*/
.list-page {
background-color: white;
height: 100%;
.main-list {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
z-index: 0;
}
.main-list.main-list-with-sub {
height: 50%;
}
.main-modal {
position: absolute;
height: 100%;
width: 100%;
display: none;
z-index: 100;
}
.top-tools {
display: flex;
align-items : center;
position: relative;
flex-direction: row-reverse;
padding: 14px 20px 14px 0;
.top-tool-main-right {
display: flex;
}
.top-tool-btn {
height: 32px;
width: 36px;
border: 1px solid #DEDEDE;
outline: none;
border-radius: 2px;
background-color: $--button-gray-background-color;
transition: background-color linear .1s;
i {
font-size: 14px;
color: $--button-gray-color;
}
}
.top-tool-btn:hover:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
}
.top-tool-btn:focus:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
border-color: #FBCEA4;
i {
color: $--button-gray-active-color;
}
}
.top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
background-color: $--button-gray-hover-background-color;
border-color: #FFC4B9;
i {
color: #F0745A;
}
}
}
.nz-table2 {
position: relative;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
flex: auto;
.el-table {
position: absolute;
width: calc(100% - 40px);
border: 1px solid #E7EAED;
border-bottom: none;
.el-table-column--selection {
width: 55px !important;
}
td {
padding: 9px 0;
border-bottom: 1px solid #E7EAED;
}
th {
border-color: #E7EAED;
}
.el-table__header th:first-of-type {
border-left: none;
}
.gutter {
position: fixed;
right: 31px;
height: 49px;
border-bottom: 1px solid #E7EAED;
background-color: white;
}
thead {
color: #333;
}
.el-table__body tr:hover>td, .el-table__body tr.hover-row.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
background-color: #f9f9f9 !important;
}
.table-operation-title {
text-align: center;
}
.table-operation-items {
display: flex;
justify-content: center;
.table-operation-item {
display: flex;
height: 22px;
border-radius: 2px;
outline: none;
}
>.table-operation-item {
justify-content: center;
align-items: center;
width: 40px;
margin-right: 10px;
border: none;
border-radius: 2px;
background-color: $--button-primary-background-color;
opacity: .8;
cursor: pointer;
i {
color: $--button-primary-color;
font-size: 12px;
}
}
>.table-operation-item:hover {
}
.table-operation-item.table-operation-item--more {
justify-content: space-between;
width: 52px;
border: 1px solid #DEDEDE;
span {
line-height: 14px;
padding-left: 10px;
}
i {
color: #999;
font-size: 12px;
}
}
}
}
}
/* start--覆盖el-table边框、gutter等样式 */
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
box-shadow: 1px 0 #E7EAED;
.cell {
color: #333;
}
}
.el-table__body-wrapper .is-hidden, .el-table__header-wrapper .is-hidden {
visibility: hidden;
}
.el-table--border td {
border-right: none !important;
}
.el-table--border .el-table__body-wrapper td:nth-last-child(2) {
box-shadow: 1px 0 #E7EAED;
}
.el-table--border .el-table__header-wrapper th:nth-last-child(3) {
border-right: none !important;
box-shadow: 1px 0 #E7EAED;
}
.el-table__fixed-body-wrapper {
td:not(.is-hidden) {
border-left: 1px solid #E7EAED;
}
}
.el-table__fixed-header-wrapper {
th:not(.is-hidden) {
border-left: 1px solid #E7EAED;
}
th:last-of-type {
border-right: none !important;
}
}
.el-table--border::after, .el-table--group::after {
width: 0;
}
/* end--覆盖el-table边框、gutter等样式 */
.pagination-bottom {
position: absolute;
bottom: 0;
height: 48px;
width: 100%;
}
}
.operation-dropdown-text {
font-size: 13px;
}

4
nezha-fronted/src/assets/css/element-var.scss Normal file
View File

@@ -0,0 +1,4 @@
/* 改变主题色变量 */
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

34
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,34 +20,52 @@ Created by iconfont
/> />
<missing-glyph /> <missing-glyph />
<glyph glyph-name="menu-assets" unicode="&#59142;" d="M926.75021473 834.93798828H97.24978527A36.24414081 36.24414081 0 0 1 61.06201172 798.69384747v-829.38769494c0-20.01037323 16.23376758-36.24414081 36.18777355-36.24414081h829.50042946a36.24414081 36.24414081 0 0 1 36.18777355 36.24414081V798.69384747A36.24414081 36.24414081 0 0 1 926.75021473 834.93798828z m-27.84542078-838.8573927H124.47516632v226.37087012h774.42962763v-226.37087012z m0 281.61077368H124.47516632V501.80754944h774.42962763v-224.11618018z m0 279.35608375H124.47516632V770.3974887100001h774.42962763V557.04745301zM317.53299255 621.24974909a55.69084155 55.69084155 0 0 1 93.40053082 25.02705834 55.80357605 55.80357605 0 0 1-93.28779631 53.99982411 55.91631055 55.91631055 0 0 1-0.11273451-79.02688245zM317.53299255 354.68903076000004a55.69084155 55.69084155 0 0 1 93.45689808 25.02705835 55.8599433 55.8599433 0 1 1-93.45689808-25.0834256zM317.53299255 59.83195366999996a55.69084155 55.69084155 0 0 1 93.40053082 25.02705835 55.8599433 55.8599433 0 1 1-93.40053082-25.02705835z" horiz-adv-x="1024" />
<glyph glyph-name="menu-alert" unicode="&#59143;" d="M671.08163206 474.18759766c148.80953613 0 270.56279297-121.75325684 270.56279297-270.56279297 0-148.80953613-121.75325684-270.56279297-270.56279297-270.56279297-148.80953613 0-270.56279297 121.75325684-270.56279297 270.56279297 0 148.80953613 121.75325684 270.56279297 270.56279297 270.56279297zM791.36934043 834.93798828c49.60317871 0 90.18759766-40.58441895 90.18759766-90.18759766v-240.5190495a30.15647797 30.15647797 0 0 0-60.14385418 0V744.75039062a30.15647797 30.15647797 0 0 1-30.04374348 30.04374347H190.09990031a30.15647797 30.15647797 0 0 1-30.04374347-30.04374347v-661.35692705c0-16.57197107 13.52813965-30.10011072 30.04374347-30.10011073h180.37519532c16.51560382 0 30.04374346-13.52813965 30.04374346-30.04374347 0-16.51560382-13.52813965-30.04374346-30.04374346-30.04374346H190.09990031c-49.60317871 0-90.18759766 40.58441895-90.18759765 90.18759766V744.75039062C99.91230266 794.35356934 140.4967216 834.93798828 190.09990031 834.93798828z m-120.28770837-420.89424482A211.03897852 211.03897852 0 0 1 460.66269328 203.62480469000002a211.03897852 211.03897852 0 0 1 210.41893878-210.41893878 211.03897852 211.03897852 0 0 1 210.47530603 210.41893878 211.03897852 211.03897852 0 0 1-210.47530603 210.41893878z m0-296.09715655a30.04374346 30.04374346 0 1 0 0-60.14385419 30.04374346 30.04374346 0 0 0 0 60.14385419z m0 241.98459796c16.57197107 0 30.10011072-13.52813965 30.10011072-30.04374346v-160.81576007a30.15647797 30.15647797 0 0 0-60.14385418 0V329.88744140999995c0 16.51560382 13.52813965 30.04374346 30.04374346 30.04374346zM370.47509563 444.14385419A30.15647797 30.15647797 0 0 0 370.47509563 384H280.28749797a30.15647797 30.15647797 0 0 0-30.04374347 30.04374346c0 16.57197107 13.52813965 30.10011072 30.04374347 30.10011073z m330.70664715 180.37519531a30.15647797 30.15647797 0 0 0 0-60.14385419H280.28749797a30.15647797 30.15647797 0 0 0-30.04374347 30.04374347c0 16.57197107 13.52813965 30.10011072 30.04374347 30.10011072z" horiz-adv-x="1024" />
<glyph glyph-name="menu-setting" unicode="&#59144;" d="M770.86844162 820.84617615c39.97142512 0 77.21256164-21.51467417 97.19827419-56.13473364l187.40700957-324.57670887a112.5971019 112.5971019 0 0 0 0-112.26946728l-187.35240379-324.57670887A112.65170767 112.65170767 0 0 0 770.86844162-52.84617615000002H396.10902826a112.65170767 112.65170767 0 0 0-97.19827419 56.13473364L111.44913872 327.86526635999996a112.5971019 112.5971019 0 0 0 0 112.26946728l187.3524038 324.57670887A112.65170767 112.65170767 0 0 0 396.10902826 820.84617615h374.75941336z m0-62.52360896H396.10902826a49.90967562 49.90967562 0 0 1-43.1385599-24.90023205L165.61806456 408.90023204a49.9642814 49.9642814 0 0 1 0-49.80046408L352.97046836 34.52305908999995a49.9642814 49.9642814 0 0 1 43.1385599-24.90023204h374.75941336a49.90967562 49.90967562 0 0 1 43.13855989 24.90023204l187.29779803 324.5221031a49.90967562 49.90967562 0 0 1 0 49.80046408l-187.29779803 324.52210311a49.9642814 49.9642814 0 0 1-43.13855989 24.90023203zM583.51603783 546.0153255800001A162.1791429 162.1791429 0 0 0 745.47675763 384a162.1791429 162.1791429 0 0 0-161.9607198-162.01532558A162.1791429 162.1791429 0 0 0 421.50071225 384a162.1791429 162.1791429 0 0 0 162.01532558 162.01532558z m0-62.52360896A99.60092816 99.60092816 0 0 1 483.96971543 384c0-54.87880088 44.66752151-99.49171662 99.5463224-99.49171662A99.60092816 99.60092816 0 0 1 682.95314867 384a99.60092816 99.60092816 0 0 1-99.49171662 99.49171662z" horiz-adv-x="1152" />
<glyph glyph-name="personal-circle" unicode="&#59145;" d="M512 820.84617615c240.26539688 0 436.84617615-196.58077927 436.84617615-436.84617615s-196.58077927-436.84617615-436.84617615-436.84617615-436.84617615 196.58077927-436.84617615 436.84617615 196.58077927 436.84617615 436.84617615 436.84617615z m0-506.35932392c-127.06763149 0-236.27917552-83.38301387-258.12148434-198.54658707a35.22072295 35.22072295 0 0 0-0.87369234-6.33426955A375.96074034 375.96074034 0 0 1 512 6.6741153499999655a376.01534612 376.01534612 0 0 1 259.04978246 102.87727449 32.32661703 32.32661703 0 0 0-0.92829812 6.33426955c-21.8423088 115.16357319-131.05385284 198.54658706-258.12148434 198.54658705zM512 761.32588465A377.10746156 377.10746156 0 0 1 134.67411535 384a375.68771148 375.68771148 0 0 1 69.62235932-218.47769385c29.92396307 87.91529295 100.9114667 157.42844073 190.90177898 190.13729817a188.7175481 188.7175481 0 0 0-71.86119597 147.43558445C323.33705768 606.4639152 408.79509089 691.81273687 512 691.81273687c103.20490911 0 188.66294232-85.34882166 188.66294232-188.60833656a188.82675964 188.82675964 0 0 0-71.64277289-147.38097868c89.99031229-32.2174055 160.97781591-101.23910133 190.73796167-190.02808661A375.41468263 375.41468263 0 0 1 889.32588465 384c0 208.48483757-168.73183553 377.32588465-377.27127888 377.32588465z m0-129.08804505a128.8150162 128.8150162 0 0 1-129.08804504-129.03343929c0-65.03547448 47.72544474-118.60373683 110.13984214-127.72290074 6.27966378 0.43684618 12.55932756 0.65526926 18.9482029 0.65526926 6.38887532 0 12.72314488-0.21842309 19.05741444-0.54605773a128.65119888 128.65119888 0 0 1 110.0306306 127.61368921A128.8150162 128.8150162 0 0 1 512 632.1832338300001z" horiz-adv-x="1024" />
<glyph glyph-name="menu-project" unicode="&#59146;" d="M251.58507324 355.60499855a30.6338381 30.6338381 0 0 0-0.43684617 40.73590593l113.68921734 126.52157376a25.22786668 25.22786668 0 0 0 18.72977981 8.5731062c6.93493304 0 13.81526032-3.00331746 18.72977979-8.40928888l93.37587015-101.45752441 235.35087741 257.84845546a24.95483781 24.95483781 0 0 0 37.4595596 0.10921155c10.32049091-11.57642367 10.37509669-29.05027071 0-40.68130014L514.62107706 360.51951803a25.61010707 25.61010707 0 0 0-18.78438557-8.5731062 25.39168399 25.39168399 0 0 0-18.72977981 8.35468312L384.05867616 461.75861935 288.93542131 356.09645049999995a25.61010707 25.61010707 0 0 0-18.9482029-8.62771198 25.55550131 25.55550131 0 0 0-18.40214517 8.08165426z m670.9411208-263.19982113H101.52841174c-14.52513536 0-26.37458788 12.88696219-26.37458789 28.77724186V792.12354006C75.15382385 807.95921395 87.00327638 820.84617615 101.52841174 820.84617615h820.9977823c14.52513536 0 26.37458788-12.83235643 26.37458788-28.72263609v-670.88651501c0-15.94488543-11.84945253-28.77724186-26.37458788-28.77724186z m-26.42919366 57.44527216V763.51011553H127.95760539v-613.49584863l768.13939499-0.10921154z m-410.47158826-147.10794981v118.49452528c0 15.89027965 11.84945253 28.72263608 26.42919365 28.72263607s26.37458788-12.83235643 26.37458789-28.72263607v-118.60373683c0-15.72646234-11.84945253-28.55881877-26.37458789-28.55881876-14.6343469 0-26.42919366 12.83235643-26.42919365 28.66803031zM681.49631634-52.84617615000002H342.44907788c-14.57974113 0-26.37458788 12.88696219-26.37458789 28.72263609 0 15.89027965 11.84945253 28.77724186 26.37458789 28.77724185h339.04723846c14.57974113 0 26.42919366-12.88696219 26.42919367-28.72263609 0-15.89027965-11.84945253-28.77724186-26.42919367-28.77724185z m241.0298777 250.20364739H101.52841174c-14.52513536 0-26.37458788 12.88696219-26.37458789 28.72263609 0 15.89027965 11.84945253 28.77724186 26.37458789 28.77724184h820.9977823c14.52513536 0 26.37458788-12.88696219 26.37458788-28.72263608 0-15.89027965-11.84945253-28.77724186-26.37458788-28.77724185z" horiz-adv-x="1024" />
<glyph glyph-name="menu-dashboard" unicode="&#59147;" d="M819.06076466 800.45981135c211.80868651-80.33011965 351.9837783-287.17856579 350.88866041-517.79751308a554.00082286 554.00082286 0 0 0-68.54149706-267.20876906A156.79511683 156.79511683 0 0 0 963.87400291-66.93798828000001H300.10371475a157.18162881 157.18162881 0 0 0-137.66276301 82.45593645c-110.92900213 200.9219267-87.22291995 451.18857681 59.58729806 626.60069754C368.77404886 817.65960436 607.25207727 880.85434908 818.9963457 800.45981135h0.06441896z m-187.58725529-30.27678858c-17.97281698 0-36.01005379-0.96628084-53.78961478-3.02767955-158.85651467-18.81026078-298.00090753-117.17761549-370.922877-262.44178468a497.31236645 497.31236645 0 0 1 7.7302441-460.59370765c17.393049-31.56516332 50.0533302-51.08402911 85.61245306-51.21286616h663.77028816a97.20781874 97.20781874 0 0 1 86.38547702 51.27728512 492.15887009 492.15887009 0 0 1 59.84497213 237.25407351 493.06073198 493.06073198 0 0 1-159.1141896 364.22333094 468.19511382 468.19511382 0 0 1-319.51675309 124.52134847z m0-303.54091676c16.49118711 0 29.89027659-13.46350844 29.89027658-29.95469554v-94.05130214a125.29437245 125.29437245 0 1 0-59.84497301 0v94.05130214c0 16.49118711 13.5279274 29.89027659 29.95469643 29.89027747v0.06441807z m0-181.40306a65.51381839 65.51381839 0 1 1 0-130.96321783 65.51381839 65.51381839 0 0 1 0 130.96321783z m394.88663237 29.63260251a29.89027659 29.89027659 0 0 0 0-59.78055406h-65.83591142a29.89027659 29.89027659 0 1 0 0 59.9093911h65.77149334v-0.12883704z m-729.86387454 0a29.89027659 29.89027659 0 0 0 0-59.78055406H229.17872591a29.89027659 29.89027659 0 1 0 0 59.9093911h67.31754129v-0.12883704z m646.44165813 268.94807387a29.89027659 29.89027659 0 0 0 0-42.38750505l-48.18518836-47.6054195a29.89027659 29.89027659 0 0 0-21.2581706-8.76094302 29.89027659 29.89027659 0 0 0-20.87165951 50.89077313l48.1207694 47.9275134a29.89027659 29.89027659 0 0 0 42.19424907 0v-0.06441897z m-587.56296595-1e-8l47.54100053-47.79867547a29.89027659 29.89027659 0 1 0-42.38750418-42.19424907l-47.60541949 47.54100142a30.01911451 30.01911451 0 1 0 42.45192314 42.45192312z m276.09854999 150.09557166c16.49118711 0 29.89027659-13.3346714 29.89027658-29.82585852v-65.83591141a29.89027659 29.89027659 0 1 0-59.84497301 0V704.15385449c0 16.49118711 13.5279274 29.89027659 29.95469643 29.89027659z" horiz-adv-x="1243" />
<glyph glyph-name="more1" unicode="&#59140;" d="M728.43042205 383.87533995C728.43042205 179.48184098000002 887.64999519 13.597261969999977 1083.89737647 13.597261969999977c196.49423301 0 355.71380687 165.884579 355.71380689 370.27807798 0 132.31270003-67.63746215 254.50446574-177.73347759 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8C796.06788421 638.37980497 728.43042205 516.1880392400001 728.43042205 383.87533995z m1495.92343402 0c0-204.39349897 158.97272142-370.27807799 355.46695444-370.27807798 196.49423301 0 355.46695443 165.884579 355.46695515 370.27807798 0 132.31270003-67.63746215 254.50446574-177.7334776 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8c-110.09601541-66.15634967-177.73347756-188.34811534-177.73347758-320.66081535z m1495.6765823 0c0-204.39349897 159.21957314-370.27807799 355.46695442-370.27807798C4271.99162582 13.597261969999977 4431.21119967 179.48184098000002 4431.21119967 383.87533995S4271.99162582 754.1534172 4075.74424523 754.1534172c-196.49423301 0-355.71380687-165.884579-355.71380686-370.27807725z" horiz-adv-x="5120" /> <glyph glyph-name="more1" unicode="&#59140;" d="M728.43042205 383.87533995C728.43042205 179.48184098000002 887.64999519 13.597261969999977 1083.89737647 13.597261969999977c196.49423301 0 355.71380687 165.884579 355.71380689 370.27807798 0 132.31270003-67.63746215 254.50446574-177.73347759 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8C796.06788421 638.37980497 728.43042205 516.1880392400001 728.43042205 383.87533995z m1495.92343402 0c0-204.39349897 158.97272142-370.27807799 355.46695444-370.27807798 196.49423301 0 355.46695443 165.884579 355.46695515 370.27807798 0 132.31270003-67.63746215 254.50446574-177.7334776 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8c-110.09601541-66.15634967-177.73347756-188.34811534-177.73347758-320.66081535z m1495.6765823 0c0-204.39349897 159.21957314-370.27807799 355.46695442-370.27807798C4271.99162582 13.597261969999977 4431.21119967 179.48184098000002 4431.21119967 383.87533995S4271.99162582 754.1534172 4075.74424523 754.1534172c-196.49423301 0-355.71380687-165.884579-355.71380686-370.27807725z" horiz-adv-x="5120" />
<glyph glyph-name="gerenzhongxin" unicode="&#59135;" d="M512 323.54360967a241.82556214 241.82556214 0 1 0 0.06045651 483.71157999A241.82556214 241.82556214 0 0 0 512 323.54360967z m0 409.28976345a167.52465781 167.52465781 0 0 1 0-334.92840343 167.52465781 167.52465781 0 0 1 0 334.92840343zM770.75335147-39.19473315000005H252.8234538C195.69216482-39.19473315000005 149.26165719 12.495480810000004 149.26165719 76.15605947999995c0 8.58480768 0.84638947 16.86733281 2.4787119 25.14985879C183.84271229 266.77505892 315.81901334 384.66501994 467.92729124 384h87.964048c152.04782221 0.90684598 284.02412244-116.98311587 316.36829167-282.69408173 12.39356028-62.27008228-22.79205908-123.9356003-78.71422036-137.47783178-7.67796171-2.11597366-15.11409738-3.02281964-22.79205908-3.02281964zM467.86683474 306.91810206c-119.945479 0.72547645-223.93047034-92.0750823-249.44306653-222.47951661-4.11103432-20.73654193 7.67796171-41.23125863 26.35898567-45.88640071 2.66008141-0.66501994 5.38061851-0.90684598 8.28252595-0.90684597h517.86944034c19.04376299-0.48365124 34.82288113 16.38368158 35.42744457 37.60387556a46.37005112 46.37005112 0 0 1-0.84638946 9.24982762c-25.4521405 130.3439778-129.43713183 223.32590608-249.38261002 222.47951662H467.86683474z" horiz-adv-x="1024" /> <glyph glyph-name="personal" unicode="&#59135;" d="M512 323.54360967a241.82556214 241.82556214 0 1 0 0.06045651 483.71157999A241.82556214 241.82556214 0 0 0 512 323.54360967z m0 409.28976345a167.52465781 167.52465781 0 0 1 0-334.92840343 167.52465781 167.52465781 0 0 1 0 334.92840343zM770.75335147-39.19473315000005H252.8234538C195.69216482-39.19473315000005 149.26165719 12.495480810000004 149.26165719 76.15605947999995c0 8.58480768 0.84638947 16.86733281 2.4787119 25.14985879C183.84271229 266.77505892 315.81901334 384.66501994 467.92729124 384h87.964048c152.04782221 0.90684598 284.02412244-116.98311587 316.36829167-282.69408173 12.39356028-62.27008228-22.79205908-123.9356003-78.71422036-137.47783178-7.67796171-2.11597366-15.11409738-3.02281964-22.79205908-3.02281964zM467.86683474 306.91810206c-119.945479 0.72547645-223.93047034-92.0750823-249.44306653-222.47951661-4.11103432-20.73654193 7.67796171-41.23125863 26.35898567-45.88640071 2.66008141-0.66501994 5.38061851-0.90684598 8.28252595-0.90684597h517.86944034c19.04376299-0.48365124 34.82288113 16.38368158 35.42744457 37.60387556a46.37005112 46.37005112 0 0 1-0.84638946 9.24982762c-25.4521405 130.3439778-129.43713183 223.32590608-249.38261002 222.47951662H467.86683474z" horiz-adv-x="1024" />
<glyph glyph-name="gengduo" unicode="&#59136;" d="M391.39493333 413.16591667H208.42053333A91.7755 91.7755 0 0 0 116.93333333 504.60506667V687.57946667A91.7755 91.7755 0 0 0 208.42053333 779.06666667h182.9744a91.7755 91.7755 0 0 0 91.43915-91.4872v-182.9744a91.7755 91.7755 0 0 0-91.43915-91.43915zM208.42053333 718.04316667a30.5598 30.5598 0 0 1-30.51175-30.51175v-182.9744c0-16.76945 13.7423-30.4637 30.51175-30.4637h182.9744a30.5598 30.5598 0 0 1 30.4637 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.4637 30.51175H208.42053333z m609.8506-304.9253h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.43915V687.57946667A91.7755 91.7755 0 0 0 635.29673333 779.06666667h182.9744A91.7755 91.7755 0 0 0 909.75833333 687.57946667v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.43915zM635.29673333 718.04316667a30.5598 30.5598 0 0 1-30.4637-30.51175v-182.9744c0-16.76945 13.69425-30.4637 30.4637-30.4637h182.9744a30.5598 30.5598 0 0 1 30.51175 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.51175 30.51175h-182.9744zM391.39493333-13.758333330000028H208.42053333A91.7755 91.7755 0 0 0 116.93333333 77.72886667v182.9744a91.7755 91.7755 0 0 0 91.4872 91.43915h182.9744a91.7755 91.7755 0 0 0 91.43915-91.43915v-182.9744A91.7755 91.7755 0 0 0 391.39493333-13.758333330000028z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.51175-30.4637v-182.9744c0-16.8175 13.7423-30.51175 30.51175-30.51175h182.9744a30.5598 30.5598 0 0 1 30.4637 30.51175v182.9744a30.5598 30.5598 0 0 1-30.4637 30.4637H208.42053333zM818.27113333-13.758333330000028h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.4872v182.9744a91.7755 91.7755 0 0 0 91.43915 91.43915h182.9744a91.7755 91.7755 0 0 0 91.4872-91.43915v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.4872z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.4637-30.4637v-182.9744c0-16.8175 13.69425-30.51175 30.4637-30.51175h182.9744a30.5598 30.5598 0 0 1 30.51175 30.51175v182.9744a30.5598 30.5598 0 0 1-30.51175 30.4637h-182.9744z" horiz-adv-x="1024" /> <glyph glyph-name="more-app" unicode="&#59136;" d="M391.39493333 413.16591667H208.42053333A91.7755 91.7755 0 0 0 116.93333333 504.60506667V687.57946667A91.7755 91.7755 0 0 0 208.42053333 779.06666667h182.9744a91.7755 91.7755 0 0 0 91.43915-91.4872v-182.9744a91.7755 91.7755 0 0 0-91.43915-91.43915zM208.42053333 718.04316667a30.5598 30.5598 0 0 1-30.51175-30.51175v-182.9744c0-16.76945 13.7423-30.4637 30.51175-30.4637h182.9744a30.5598 30.5598 0 0 1 30.4637 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.4637 30.51175H208.42053333z m609.8506-304.9253h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.43915V687.57946667A91.7755 91.7755 0 0 0 635.29673333 779.06666667h182.9744A91.7755 91.7755 0 0 0 909.75833333 687.57946667v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.43915zM635.29673333 718.04316667a30.5598 30.5598 0 0 1-30.4637-30.51175v-182.9744c0-16.76945 13.69425-30.4637 30.4637-30.4637h182.9744a30.5598 30.5598 0 0 1 30.51175 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.51175 30.51175h-182.9744zM391.39493333-13.758333330000028H208.42053333A91.7755 91.7755 0 0 0 116.93333333 77.72886667v182.9744a91.7755 91.7755 0 0 0 91.4872 91.43915h182.9744a91.7755 91.7755 0 0 0 91.43915-91.43915v-182.9744A91.7755 91.7755 0 0 0 391.39493333-13.758333330000028z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.51175-30.4637v-182.9744c0-16.8175 13.7423-30.51175 30.51175-30.51175h182.9744a30.5598 30.5598 0 0 1 30.4637 30.51175v182.9744a30.5598 30.5598 0 0 1-30.4637 30.4637H208.42053333zM818.27113333-13.758333330000028h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.4872v182.9744a91.7755 91.7755 0 0 0 91.43915 91.43915h182.9744a91.7755 91.7755 0 0 0 91.4872-91.43915v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.4872z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.4637-30.4637v-182.9744c0-16.8175 13.69425-30.51175 30.4637-30.51175h182.9744a30.5598 30.5598 0 0 1 30.51175 30.51175v182.9744a30.5598 30.5598 0 0 1-30.51175 30.4637h-182.9744z" horiz-adv-x="1024" />
<glyph glyph-name="tuichu" unicode="&#59137;" d="M675.65514702 649.10127247a37.60387474 37.60387474 0 0 0 38.5711764 64.32559943A394.41749129 394.41749129 0 0 0 904.96623587 375.23382360999994c0-217.82437455-175.92809597-394.41749129-392.96653839-394.41749129S119.03315992 157.40944824999997 119.03315992 375.23382360999994a394.4779478 394.4779478 0 0 0 191.10264985 338.43487351 37.36204953 37.36204953 0 0 0 51.38793223-12.87721151 37.66433124 37.66433124 0 0 0-12.87721151-51.56930094 319.2097418 319.2097418 0 0 1-154.76835931-274.04881756c0-176.29083421 142.43525555-319.2097418 318.1215263-319.2097418 175.68627075 0 318.12152631 142.91890679 318.12152713 319.2097418a319.2097418 319.2097418 0 0 1-154.46607759 273.86744885zM511.99969748 807.19473315a37.48296173 37.48296173 0 0 0 37.42250604-37.60387475v-300.46826053a37.48296173 37.48296173 0 1 0-74.84501125 0V769.5908584A37.48296173 37.48296173 0 0 0 511.99969748 807.19473315z" horiz-adv-x="1024" /> <glyph glyph-name="exit" unicode="&#59137;" d="M675.65514702 649.10127247a37.60387474 37.60387474 0 0 0 38.5711764 64.32559943A394.41749129 394.41749129 0 0 0 904.96623587 375.23382360999994c0-217.82437455-175.92809597-394.41749129-392.96653839-394.41749129S119.03315992 157.40944824999997 119.03315992 375.23382360999994a394.4779478 394.4779478 0 0 0 191.10264985 338.43487351 37.36204953 37.36204953 0 0 0 51.38793223-12.87721151 37.66433124 37.66433124 0 0 0-12.87721151-51.56930094 319.2097418 319.2097418 0 0 1-154.76835931-274.04881756c0-176.29083421 142.43525555-319.2097418 318.1215263-319.2097418 175.68627075 0 318.12152631 142.91890679 318.12152713 319.2097418a319.2097418 319.2097418 0 0 1-154.46607759 273.86744885zM511.99969748 807.19473315a37.48296173 37.48296173 0 0 0 37.42250604-37.60387475v-300.46826053a37.48296173 37.48296173 0 1 0-74.84501125 0V769.5908584A37.48296173 37.48296173 0 0 0 511.99969748 807.19473315z" horiz-adv-x="1024" />
<glyph glyph-name="view1" unicode="&#59138;" d="M1134.69837213 268.89536977c-117.54955097-158.7701601-289.4387478-259.17551542-481.37920001-259.17551543S289.41498305 110.12520964999999 171.93997294 268.89536977c-51.87982727 70.14212214-51.87982727 174.42355627 0 244.49113914C289.41498305 672.1566698199999 461.37872074 772.6365644 653.31917212 772.6365644s363.82964902-100.40535532 481.37920001-259.25005549c51.87982727-70.06758289 51.87982727-174.34901622 0-244.49113914z m-52.1779867 186.94627336C973.46839264 613.12100455 816.56173148 703.31438205 652.12653286 703.31438205S330.78467309 613.12100455 221.7326803 455.84164313a117.02777059 117.02777059 0 0 1 0-129.32686753c109.05199279-157.27936062 265.8841139-247.47273812 430.39385256-247.4727381s321.34185977 90.1933775 430.39385257 247.4727381a117.02777059 117.02777059 0 0 1 0 129.32686753zM653.61733234 148.51329993000002a242.85125957 242.85125957 0 1 0 0 485.70251914 242.85125957 242.85125957 0 0 0 0-485.70251914z m0 416.30579594a173.45453637 173.45453637 0 1 1 0-346.90907273 173.45453637 173.45453637 0 0 1 0 346.90907273z" horiz-adv-x="1303" /> <glyph glyph-name="view1" unicode="&#59138;" d="M1134.69837213 268.89536977c-117.54955097-158.7701601-289.4387478-259.17551542-481.37920001-259.17551543S289.41498305 110.12520964999999 171.93997294 268.89536977c-51.87982727 70.14212214-51.87982727 174.42355627 0 244.49113914C289.41498305 672.1566698199999 461.37872074 772.6365644 653.31917212 772.6365644s363.82964902-100.40535532 481.37920001-259.25005549c51.87982727-70.06758289 51.87982727-174.34901622 0-244.49113914z m-52.1779867 186.94627336C973.46839264 613.12100455 816.56173148 703.31438205 652.12653286 703.31438205S330.78467309 613.12100455 221.7326803 455.84164313a117.02777059 117.02777059 0 0 1 0-129.32686753c109.05199279-157.27936062 265.8841139-247.47273812 430.39385256-247.4727381s321.34185977 90.1933775 430.39385257 247.4727381a117.02777059 117.02777059 0 0 1 0 129.32686753zM653.61733234 148.51329993000002a242.85125957 242.85125957 0 1 0 0 485.70251914 242.85125957 242.85125957 0 0 0 0-485.70251914z m0 416.30579594a173.45453637 173.45453637 0 1 1 0-346.90907273 173.45453637 173.45453637 0 0 1 0 346.90907273z" horiz-adv-x="1303" />
<glyph glyph-name="yuyanqiehuan" unicode="&#59139;" d="M576.01387129 272.72245598999996L474.57560481 372.75511104l1.17134246 1.17134324a698.1201686 698.1201686 0 0 1 148.17483481 260.38945151h117.01712257V714.26003585H461.39800085V793.96989774H381.57100529v-79.70986189H102.03010226v-79.35845844h446.04724874a629.4209275 629.4209275 0 0 0-126.56356392-213.71145119 628.65955494 628.65955494 0 0 0-92.24322699 133.53305296H249.38499728a700.05288361 700.05288361 0 0 1 119.00840404-181.73379918l-203.05223307-200.29957905 56.4587114-56.45871141 199.71390743 199.36250478 124.16231177-123.98661084 30.33777244 81.11547251z m224.83920489 202.29086131h-79.88556282L541.28356447-3.3629861099999516h79.8855628l44.92098703 119.59407565h189.64036172l44.92098703-119.59407565H980.53702587l-179.68394969 478.37630341z m-104.83515934-279.07236587L760.91029516 368.77254655l64.89237832-172.77302788h-129.78475664z" horiz-adv-x="1097" /> <glyph glyph-name="language-change" unicode="&#59139;" d="M576.01387129 272.72245598999996L474.57560481 372.75511104l1.17134246 1.17134324a698.1201686 698.1201686 0 0 1 148.17483481 260.38945151h117.01712257V714.26003585H461.39800085V793.96989774H381.57100529v-79.70986189H102.03010226v-79.35845844h446.04724874a629.4209275 629.4209275 0 0 0-126.56356392-213.71145119 628.65955494 628.65955494 0 0 0-92.24322699 133.53305296H249.38499728a700.05288361 700.05288361 0 0 1 119.00840404-181.73379918l-203.05223307-200.29957905 56.4587114-56.45871141 199.71390743 199.36250478 124.16231177-123.98661084 30.33777244 81.11547251z m224.83920489 202.29086131h-79.88556282L541.28356447-3.3629861099999516h79.8855628l44.92098703 119.59407565h189.64036172l44.92098703-119.59407565H980.53702587l-179.68394969 478.37630341z m-104.83515934-279.07236587L760.91029516 368.77254655l64.89237832-172.77302788h-129.78475664z" horiz-adv-x="1097" />
<glyph glyph-name="zhongduan" unicode="&#59141;" d="M918.97153443 682.74641724v-620.03973389H168.70090952V682.74641724h750.27062491m0 62.00397338H168.70090952A62.22944238 62.22944238 0 0 1 106.15581055 682.74641724v-620.03973389c0-34.27128711 27.95815527-62.00397339 62.54509897-62.00397339h750.27062491a62.22944238 62.22944238 0 0 1 62.54509897 62.00397339V682.74641724c0 34.27128711-28.00324907 62.00397339-62.54509897 62.00397338zM148.99491943 502.01047154h771.10395996V444.87662842H148.99491943V502.01047154zM252.53028155 616.23306396h60.69625322v-57.13384311H252.53028155V616.23306396z m121.34741264 1e-8h60.69625322v-57.13384312H373.92278799V616.23306396z m121.39250645 0h60.69625322v-57.13384312H495.27020064V616.23306396zM786.21539068 230.68108398000004H539.95815527c-2.97619072 0-5.36616206-3.02128452-5.36616205-6.67388222v-40.17857476c0-3.69769151 2.38997134-6.71897603 5.36616205-6.71897602h246.3023292c2.97619072 0 5.36616206 3.02128452 5.36616207 6.71897602v40.13348096c0 3.69769151-2.38997134 6.71897603-5.36616206 6.71897602zM265.29182661 145.00286620999998a30.8892522 30.8892522 0 0 0-29.49134443 23.58405679 32.87337935 32.87337935 0 0 0 13.75360864 36.07503906l109.21718076 68.85823081-109.21718076 68.81313701a32.51262896 32.51262896 0 0 0-14.88095362 28.09343667 32.42244136 32.42244136 0 0 0 15.7377358 27.55231108 29.31096924 29.31096924 0 0 0 30.6186894-0.49603178L433.98772803 301.02741016000004a32.46753516 32.46753516 0 0 0 14.88095361-27.55231109 32.46753516 32.46753516 0 0 0-14.88095362-27.55231109L281.02956241 149.51224608999996a29.53643823 29.53643823 0 0 0-15.7828296-4.55447368z" horiz-adv-x="1075" /> <glyph glyph-name="terminal" unicode="&#59141;" d="M918.97153443 682.74641724v-620.03973389H168.70090952V682.74641724h750.27062491m0 62.00397338H168.70090952A62.22944238 62.22944238 0 0 1 106.15581055 682.74641724v-620.03973389c0-34.27128711 27.95815527-62.00397339 62.54509897-62.00397339h750.27062491a62.22944238 62.22944238 0 0 1 62.54509897 62.00397339V682.74641724c0 34.27128711-28.00324907 62.00397339-62.54509897 62.00397338zM148.99491943 502.01047154h771.10395996V444.87662842H148.99491943V502.01047154zM252.53028155 616.23306396h60.69625322v-57.13384311H252.53028155V616.23306396z m121.34741264 1e-8h60.69625322v-57.13384312H373.92278799V616.23306396z m121.39250645 0h60.69625322v-57.13384312H495.27020064V616.23306396zM786.21539068 230.68108398000004H539.95815527c-2.97619072 0-5.36616206-3.02128452-5.36616205-6.67388222v-40.17857476c0-3.69769151 2.38997134-6.71897603 5.36616205-6.71897602h246.3023292c2.97619072 0 5.36616206 3.02128452 5.36616207 6.71897602v40.13348096c0 3.69769151-2.38997134 6.71897603-5.36616206 6.71897602zM265.29182661 145.00286620999998a30.8892522 30.8892522 0 0 0-29.49134443 23.58405679 32.87337935 32.87337935 0 0 0 13.75360864 36.07503906l109.21718076 68.85823081-109.21718076 68.81313701a32.51262896 32.51262896 0 0 0-14.88095362 28.09343667 32.42244136 32.42244136 0 0 0 15.7377358 27.55231108 29.31096924 29.31096924 0 0 0 30.6186894-0.49603178L433.98772803 301.02741016000004a32.46753516 32.46753516 0 0 0 14.88095361-27.55231109 32.46753516 32.46753516 0 0 0-14.88095362-27.55231109L281.02956241 149.51224608999996a29.53643823 29.53643823 0 0 0-15.7828296-4.55447368z" horiz-adv-x="1075" />
<glyph glyph-name="tongbi" unicode="&#59134;" d="M215.25663296 480.73022508c0 4.99252809-0.56165961 9.92264861-1.56016455 14.79036328l94.98283953 76.26086066c21.59268278-10.29708808 46.92976099-8.61211009 66.96227839 4.36846176l85.68425724-51.61025549c-0.12481343-1.80979142-0.56165961-3.43236269-0.56165962-5.1797474a69.89538819 69.89538819 0 0 1 139.79077637 0c0 7.36397827-1.49775867 14.22870367-3.55717612 20.90620974l141.35094176 144.78330445a69.77057475 69.77057475 0 1 1-46.43050811 65.52692642c0-7.36397827 1.37294524-14.3535171 3.55717613-21.03102317l-141.35094091-144.78330445a67.39912456 67.39912456 0 0 1-23.52728764 4.36846176c-13.97907763 0-27.14686964-4.24364833-38.06802321-11.35800059L407.15691772 629.2579249600001c0.18722015 1.93460486 0.56165961 3.74439544 0.56165962 5.80381289a69.70816803 69.70816803 0 1 1-137.79376565-15.16480273L175.12919148 543.76088704a68.83447568 68.83447568 0 0 1-29.70553998 6.86472622 69.83298146 69.83298146 0 1 1 69.89538818-69.89538818z m662.00917702-122.69136962a69.89538819 69.89538819 0 0 1-69.83298147-69.89538818c0-7.48879171 1.49775867-14.3535171 3.61958201-21.21824249l-141.35094094-144.5960843a68.70966309 68.70966309 0 0 1-23.58969351 4.36846176c-7.92563789 0-15.28961616-1.56016455-22.27915498-4.05642901L519.30157155 227.23462947999997c2.49626363 6.98953882 3.9940223 14.41592382 3.9940223 22.27915499a69.89538819 69.89538819 0 0 1-139.66596291 0c0-5.17974739 0.74887892-10.29708808 1.80979141-15.16480274l-94.85802694-75.94882878a69.83298146 69.83298146 0 1 1 38.50487022-48.24029868l94.92043282 76.13604809c8.98654955-4.11883573 18.90919901-6.61509936 29.45591395-6.61509936 7.86323117 0 15.22720945 1.49775867 22.27915499 3.86920886l104.53104952-104.59345624a68.64725637 68.64725637 0 0 1-3.9940223-22.15434155 69.89538819 69.89538819 0 0 1 139.66596293 0c0 7.30157155-1.37294524 14.3535171-3.55717613 20.96861646l141.41334849 144.78330445c7.48879171-2.68348378 15.16480273-4.36846176 23.40247336-4.36846176a69.89538819 69.89538819 0 0 1 0.06240672 139.85318224z" horiz-adv-x="1024" /> <glyph glyph-name="compare" unicode="&#59134;" d="M215.25663296 480.73022508c0 4.99252809-0.56165961 9.92264861-1.56016455 14.79036328l94.98283953 76.26086066c21.59268278-10.29708808 46.92976099-8.61211009 66.96227839 4.36846176l85.68425724-51.61025549c-0.12481343-1.80979142-0.56165961-3.43236269-0.56165962-5.1797474a69.89538819 69.89538819 0 0 1 139.79077637 0c0 7.36397827-1.49775867 14.22870367-3.55717612 20.90620974l141.35094176 144.78330445a69.77057475 69.77057475 0 1 1-46.43050811 65.52692642c0-7.36397827 1.37294524-14.3535171 3.55717613-21.03102317l-141.35094091-144.78330445a67.39912456 67.39912456 0 0 1-23.52728764 4.36846176c-13.97907763 0-27.14686964-4.24364833-38.06802321-11.35800059L407.15691772 629.2579249600001c0.18722015 1.93460486 0.56165961 3.74439544 0.56165962 5.80381289a69.70816803 69.70816803 0 1 1-137.79376565-15.16480273L175.12919148 543.76088704a68.83447568 68.83447568 0 0 1-29.70553998 6.86472622 69.83298146 69.83298146 0 1 1 69.89538818-69.89538818z m662.00917702-122.69136962a69.89538819 69.89538819 0 0 1-69.83298147-69.89538818c0-7.48879171 1.49775867-14.3535171 3.61958201-21.21824249l-141.35094094-144.5960843a68.70966309 68.70966309 0 0 1-23.58969351 4.36846176c-7.92563789 0-15.28961616-1.56016455-22.27915498-4.05642901L519.30157155 227.23462947999997c2.49626363 6.98953882 3.9940223 14.41592382 3.9940223 22.27915499a69.89538819 69.89538819 0 0 1-139.66596291 0c0-5.17974739 0.74887892-10.29708808 1.80979141-15.16480274l-94.85802694-75.94882878a69.83298146 69.83298146 0 1 1 38.50487022-48.24029868l94.92043282 76.13604809c8.98654955-4.11883573 18.90919901-6.61509936 29.45591395-6.61509936 7.86323117 0 15.22720945 1.49775867 22.27915499 3.86920886l104.53104952-104.59345624a68.64725637 68.64725637 0 0 1-3.9940223-22.15434155 69.89538819 69.89538819 0 0 1 139.66596293 0c0 7.30157155-1.37294524 14.3535171-3.55717613 20.96861646l141.41334849 144.78330445c7.48879171-2.68348378 15.16480273-4.36846176 23.40247336-4.36846176a69.89538819 69.89538819 0 0 1 0.06240672 139.85318224z" horiz-adv-x="1024" />
<glyph glyph-name="moban" unicode="&#58884;" d="M679-0.5H246.7c-39.7 0-72 31.8-72 70.9V614.3c0 39.1 32.3 70.9 72 70.9H679c39.7 0 72-31.8 72-70.9v-543.8c0-39.1-32.3-71-72-71zM246.7 637.9c-13.3 0-24-10.6-24-23.6v-543.8c0-13 10.8-23.6 24-23.6H679c13.3 0 24 10.6 24 23.6V614.3c0 13-10.8 23.6-24 23.6H246.7z m72.1-94.5H607v-23.6H318.8v23.6zM619 507.9H306.8v47.3H619v-47.3z m-288.2 23.7H595 330.8z m-12-82.8H607v-23.6H318.8v23.6zM619 413.3H306.8v47.3H619v-47.3zM330.8 437H595 330.8z m444.5-354.7v47.3c13.1 0 23.8 10.7 23.8 23.8V696.9c0 13.1-10.7 23.8-23.8 23.8H342.6c-13.1 0-23.8-10.7-23.8-23.8h-48c0 39.2 32.2 71.1 71.8 71.1h432.7c39.6 0 71.8-31.9 71.8-71.1v-543.5c0-39.2-32.2-71.1-71.8-71.1zM318.8 354.2H607v-23.6H318.8v23.6zM619 318.7H306.8V366H619v-47.3z m-288.2 23.7H595 330.8z" horiz-adv-x="1024" /> <glyph glyph-name="template2" unicode="&#58884;" d="M679-0.5H246.7c-39.7 0-72 31.8-72 70.9V614.3c0 39.1 32.3 70.9 72 70.9H679c39.7 0 72-31.8 72-70.9v-543.8c0-39.1-32.3-71-72-71zM246.7 637.9c-13.3 0-24-10.6-24-23.6v-543.8c0-13 10.8-23.6 24-23.6H679c13.3 0 24 10.6 24 23.6V614.3c0 13-10.8 23.6-24 23.6H246.7z m72.1-94.5H607v-23.6H318.8v23.6zM619 507.9H306.8v47.3H619v-47.3z m-288.2 23.7H595 330.8z m-12-82.8H607v-23.6H318.8v23.6zM619 413.3H306.8v47.3H619v-47.3zM330.8 437H595 330.8z m444.5-354.7v47.3c13.1 0 23.8 10.7 23.8 23.8V696.9c0 13.1-10.7 23.8-23.8 23.8H342.6c-13.1 0-23.8-10.7-23.8-23.8h-48c0 39.2 32.2 71.1 71.8 71.1h432.7c39.6 0 71.8-31.9 71.8-71.1v-543.5c0-39.2-32.2-71.1-71.8-71.1zM318.8 354.20000000000005H607v-23.6H318.8v23.6zM619 318.70000000000005H306.8V366H619v-47.3z m-288.2 23.7H595 330.8z" horiz-adv-x="1024" />
<glyph glyph-name="chaoshi" unicode="&#59133;" d="M757.82562345 339.48597884000003a201.95579891 201.95579891 0 0 0 201.50486092-202.47115675c0-111.83262109-90.18759766-202.47115673-201.50486092-202.47115673a201.95579891 201.95579891 0 0 0-201.44044109 202.47115673c0 111.76820125 90.18759766 202.47115673 201.44044109 202.47115675zM506.58874414 834.93798828c246.08330193 0 445.59115226-200.47414528 445.59115226-447.8458422a30.92146168 30.92146168 0 0 0-61.58524576-0.70861646v0.70861646c0 213.16482878-171.93621321 385.8740783-383.94148666 385.8740783-212.06969416 0-383.94148753-172.70924951-383.94148754-385.8740783 0-210.97455867 168.45754811-382.39541406 377.56393586-385.8740783h6.37755168a30.92146168 30.92146168 0 0 0 30.79262288-30.92146254 30.92146168 30.92146168 0 0 0-30.79262288-31.05030136C260.56986205-60.75369611999997 61.06201172 139.84928882999998 61.06201172 387.09214608 61.06201172 634.463843 260.56986205 834.93798828 506.65316398 834.93798828z m251.23687931-543.05817756a154.4140515 154.4140515 0 0 1-153.96311351-154.86498863 154.4140515 154.4140515 0 0 1 153.96311351-154.86498948 154.4140515 154.4140515 0 0 1 154.09195232 154.86498948 154.4140515 154.4140515 0 0 1-154.09195232 154.80056879z m80.65348007-138.2447029a26.15440332 26.15440332 0 1 0 0-52.43764631H677.23656322a26.15440332 26.15440332 0 0 0-26.02556452 26.28324299c0 14.43001562 11.65996785 26.15440332 26.02556452 26.15440332h161.2425403z m-326.09258537 488.30142148a32.20985668 32.20985668 0 0 0 32.20985668-32.27427565v-256.26161701c0-10.30715389-4.83147819-19.45475333-12.23974552-25.38136703a31.56565918 31.56565918 0 0 0-22.9978374-9.98505557h-0.12883968l-255.10206169 0.45093798a32.01659717 32.01659717 0 0 0-0.19325951 64.03319434h0.06441983l226.24203045-0.38651815V609.66225365a32.20985668 32.20985668 0 0 0 32.20985668 32.33869549z" horiz-adv-x="1024" /> <glyph glyph-name="timeout" unicode="&#59133;" d="M757.82562345 339.48597884000003a201.95579891 201.95579891 0 0 0 201.50486092-202.47115675c0-111.83262109-90.18759766-202.47115673-201.50486092-202.47115673a201.95579891 201.95579891 0 0 0-201.44044109 202.47115673c0 111.76820125 90.18759766 202.47115673 201.44044109 202.47115675zM506.58874414 834.93798828c246.08330193 0 445.59115226-200.47414528 445.59115226-447.8458422a30.92146168 30.92146168 0 0 0-61.58524576-0.70861646v0.70861646c0 213.16482878-171.93621321 385.8740783-383.94148666 385.8740783-212.06969416 0-383.94148753-172.70924951-383.94148754-385.8740783 0-210.97455867 168.45754811-382.39541406 377.56393586-385.8740783h6.37755168a30.92146168 30.92146168 0 0 0 30.79262288-30.92146254 30.92146168 30.92146168 0 0 0-30.79262288-31.05030136C260.56986205-60.75369611999997 61.06201172 139.84928882999998 61.06201172 387.09214608 61.06201172 634.463843 260.56986205 834.93798828 506.65316398 834.93798828z m251.23687931-543.05817756a154.4140515 154.4140515 0 0 1-153.96311351-154.86498863 154.4140515 154.4140515 0 0 1 153.96311351-154.86498948 154.4140515 154.4140515 0 0 1 154.09195232 154.86498948 154.4140515 154.4140515 0 0 1-154.09195232 154.80056879z m80.65348007-138.2447029a26.15440332 26.15440332 0 1 0 0-52.43764631H677.23656322a26.15440332 26.15440332 0 0 0-26.02556452 26.28324299c0 14.43001562 11.65996785 26.15440332 26.02556452 26.15440332h161.2425403z m-326.09258537 488.30142148a32.20985668 32.20985668 0 0 0 32.20985668-32.27427565v-256.26161701c0-10.30715389-4.83147819-19.45475333-12.23974552-25.38136703a31.56565918 31.56565918 0 0 0-22.9978374-9.98505557h-0.12883968l-255.10206169 0.45093798a32.01659717 32.01659717 0 0 0-0.19325951 64.03319434h0.06441983l226.24203045-0.38651815V609.66225365a32.20985668 32.20985668 0 0 0 32.20985668 32.33869549z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-left1" unicode="&#59131;" d="M210.88500949 384L841.59694303 759.7816572 672.94613541 448.63444528H2014.63696262v-127.31482565H672.79582245L841.59694303 8.21834279999996z" horiz-adv-x="2218" /> <glyph glyph-name="arrow-left1" unicode="&#59131;" d="M210.88500949 384L841.59694303 759.7816572 672.94613541 448.63444528H2014.63696262v-127.31482565H672.79582245L841.59694303 8.21834279999996z" horiz-adv-x="2218" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 156 KiB

After

Width:  |  Height:  |  Size: 167 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

4
nezha-fronted/src/assets/css/main.scss Normal file
View File

@@ -0,0 +1,4 @@
@import './nzIcon.css';
@import './theme.scss';
@import './common.scss';
@import '../stylus/index.scss';

36
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

29
nezha-fronted/src/assets/css/theme.scss Normal file
View File

@@ -0,0 +1,29 @@
:root {
--theme-color: #FA901C; // 默认主题色
}
$--theme-color: var(--theme-color); // 主题色
/* 按钮 */
$--button-primary-color: #FFF; // 普通按钮字色
$--button-primary-background-color: var(--theme-color); // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: var(--theme-color); // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-border-color: #DEDEDE; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度
/* element-ui变量覆盖 */
/*$--color-primary: red; // 覆盖element-ui的主题色
$--box-shadow-base: none; // 取消box-shadow
$--box-shadow-dark: none;
$--box-shadow-light: 0 28px 32px 0 red;
$--input-focus-border: red;
@import "~element-ui/packages/theme-chalk/src/index";*/

3
nezha-fronted/src/assets/js/theme.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
}

9
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -1,4 +1,4 @@
$global-text-color-active: #ee9d3f; // 全局文字active字色 $global-text-color-active: #fa901c; // 全局文字active字色
$content-right-background-color: #f9f9f9; //右侧背景色 $content-right-background-color: #f9f9f9; //右侧背景色
@@ -11,8 +11,10 @@ $btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色 $btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色
$btn-normal-txt-color: #fff; //橙色按钮字体颜色 $btn-normal-txt-color: #fff; //橙色按钮字体颜色
$btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影 $btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
$btn-light-background-color: linear-gradient(rgb(247, 248, 250) 0%, rgb(231, 234, 240) 100%); //灰色按钮背景颜色 // $btn-light-background-color: linear-gradient(rgb(247, 248, 250) 0%, rgb(231, 234, 240) 100%); //灰色按钮背景颜色
$btn-light-background-color-hover: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%); //灰色按钮hover背景颜色 // $btn-light-background-color-hover: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%); //灰色按钮hover背景颜色
$btn-light-background-color: #F9F9F9;
$btn-light-background-color-hover: #FFF;
$btn-light-txt-color: #666; //灰色按钮字体颜色 $btn-light-txt-color: #666; //灰色按钮字体颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影 $btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
@@ -49,4 +51,3 @@ $suspended-color: #9e9c98; //全局停用色灰色
$left-menu-bgcolor:#FFF; $left-menu-bgcolor:#FFF;
@import './main.scss'; @import './main.scss';
/*@import './table.scss';*/

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

@@ -37,10 +37,10 @@ li{
list-style-type:none ; list-style-type:none ;
} }
.nz-icon-gear:before { /*.nz-icon-gear:before {
color: #BA3939; color: #BA3939;
font-size:12px; font-size:12px;
} }*/
/* begin--通用*/ /* begin--通用*/
.margin-l-5 { .margin-l-5 {
@@ -546,7 +546,7 @@ li{
.sub-list-tab-active { .sub-list-tab-active {
color: $global-text-color-active; color: $global-text-color-active;
background-color: white; background-color: white;
border-top: solid 2px #ee9d3f; border-top: solid 2px $global-text-color-active;
} }
.sub-list-tab-title { .sub-list-tab-title {
font-size: 14px; font-size: 14px;
@@ -664,6 +664,21 @@ li{
cursor: pointer; cursor: pointer;
} }
/* begin--顶部工具栏*/ /* begin--顶部工具栏*/
/*.main-list {
height: 100%;
position: relative;
z-index: 0;
}
.main-list.main-list-with-sub {
height: 50%;
}
.main-modal {
position: absolute;
height: 100%;
width: 100%;
display: none;
z-index: 100;
}
.top-tools { .top-tools {
display: flex; display: flex;
height: 50px; height: 50px;
@@ -676,7 +691,6 @@ li{
} }
.top-tools .top-tool-search { .top-tools .top-tool-search {
width: 260px; width: 260px;
/*margin: -2px 0 0 0;*/
} }
.top-tools .top-tool-btn-txt .nz-icon{ .top-tools .top-tool-btn-txt .nz-icon{
display: inline-block; display: inline-block;
@@ -707,27 +721,21 @@ li{
margin-top: -2px; margin-top: -2px;
overflow: hidden; overflow: hidden;
} }
/*.top-tool-main-right>.nz-btn, .top-tool-main-right-to-left>.nz-btn, .top-tool-main-right>.nz-btn-group, .top-tool-main-right>.panel-calendar {
margin-top: -2px;
}*/
.asset .top-tool-main-right-to-left { .asset .top-tool-main-right-to-left {
right: calc(100% - 440px) !important; right: calc(100% - 440px) !important;
/*transform: translateX(100%);*/
} }
.config .top-tool-main-right-to-left { .config .top-tool-main-right-to-left {
right: calc(100% - 492px) !important; right: calc(100% - 492px) !important;
/*transform: translateX(100%);*/
} }
.top-tool-main-right-to-left { .top-tool-main-right-to-left {
right: calc(100% - 390px) !important; right: calc(100% - 390px) !important;
/*transform: translateX(100%);*/
} }
.top-tool-main-right-to-left-small{ .top-tool-main-right-to-left-small{
right: calc(100% - 360px) !important; right: calc(100% - 360px) !important;
} }
.top-tool-main-right-to-left-little{ .top-tool-main-right-to-left-little{
right: calc(100% - 286px) !important; right: calc(100% - 286px) !important;
} }*/
/* end--顶部工具栏*/ /* end--顶部工具栏*/
/* begin--二级顶部工具栏*/ /* begin--二级顶部工具栏*/
@@ -761,14 +769,6 @@ li{
.has-sub-popper { .has-sub-popper {
color: $danger-color; color: $danger-color;
} }
.main-list {
height: 100%;
position: relative;
z-index: 0;
}
.main-list.main-list-with-sub {
height: 50%;
}
.sub-box { .sub-box {
height: 50%; height: 50%;
position: relative; position: relative;
@@ -783,13 +783,7 @@ li{
.main-and-sub-transition { .main-and-sub-transition {
transition: .4s height; transition: .4s height;
} }
.main-modal {
position: absolute;
height: 100%;
width: 100%;
display: none;
z-index: 100;
}
.resize-modal { .resize-modal {
width: 100%; width: 100%;
opacity: 0.6; opacity: 0.6;
@@ -902,10 +896,10 @@ li{
.nz-table .el-table__header th:nth-last-child(2) { .nz-table .el-table__header th:nth-last-child(2) {
border-right: none; border-right: none;
} }
.nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { /*.nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: none; border-right: none;
background: #f9f9f9; background: #f9f9f9;
} }*/
/*.nz-table .el-table__body { /*.nz-table .el-table__body {
width: 100% !important; width: 100% !important;
} }
@@ -1023,7 +1017,7 @@ li{
.el-table .el-table__body tr:hover>td { .el-table .el-table__body tr:hover>td {
background-color: #f0f0f0 !important; background-color: #f0f0f0 !important;
} }
.nz-table-gear { /*.nz-table-gear {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
} }
@@ -1031,7 +1025,7 @@ li{
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
left: -3px; left: -3px;
} }*/
.alert-message-tag, .alert-rule-tag { .alert-message-tag, .alert-rule-tag {
margin: 3px; margin: 3px;
} }
@@ -1889,7 +1883,7 @@ li{
.query-input-active { .query-input-active {
margin-top: 1px; margin-top: 1px;
} }
.top-tools input, .sub-top-tools input { .sub-top-tools input {
background-color: $content-right-background-color; background-color: $content-right-background-color;
} }
.query-input-active .el-input__inner, .query-input-inactive .el-input__inner { .query-input-active .el-input__inner, .query-input-inactive .el-input__inner {
@@ -2364,9 +2358,6 @@ li{
/deep/ .el-input--mini .el-input__icon{ /deep/ .el-input--mini .el-input__icon{
line-height: 24px; line-height: 24px;
} }
.content-row-box .content-col-box:first-child{
margin-left: 0;
}
.right-box-small-title{ .right-box-small-title{
font-family: Roboto-Regular; font-family: Roboto-Regular;
font-size: 14px; font-size: 14px;
@@ -2469,15 +2460,15 @@ li{
} }
} }
.el-radio-group .el-radio__inner:hover{ .el-radio-group .el-radio__inner:hover{
border-color: #ee9d3f !important; border-color: $global-text-color-active !important;
} }
.el-radio-group .is-checked { .el-radio-group .is-checked {
.el-radio__inner{ .el-radio__inner{
background-color: #ee9d3f !important; background-color: $global-text-color-active !important;
border-color: #ee9d3f !important; border-color: $global-text-color-active !important;
} }
.el-radio__label{ .el-radio__label{
color: #ee9d3f !important;; color: $global-text-color-active !important;;
} }
} }
/deep/ .el-input__inner{ /deep/ .el-input__inner{
@@ -2496,6 +2487,6 @@ li{
} }
/deep/ .el-switch.is-checked .el-switch__core{ /deep/ .el-switch.is-checked .el-switch__core{
border-color: #ee9d3f; border-color: $global-text-color-active;
background-color: #ee9d3f; background-color: $global-text-color-active;
} }

47
nezha-fronted/src/assets/stylus/table.scss
View File

@@ -1,47 +0,0 @@
/* 重写更改列宽的提示元素样式 */
revogr-header .data-header-cell .resizable:hover {
background-color: #ccc !important;
}
/* 重写表头样式 */
revo-grid[theme=compact] revogr-viewport revogr-header {
line-height: 32px;
.header-row {
height: 32px;
}
.data-header-cell {
border-right: 1px solid #d4d4d4;
color: #666666;
background-image: linear-gradient(#f8f8f8, #e6e6e6);
border-left: 1px solid white;
border-bottom: 1px solid #d4d4d4;
}
}
.data-cell {
font-size: 12px;
}
.data-cell .danger {
background-color: $danger-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .success {
background-color: $success-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .suspended {
background-color: $suspended-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}
.data-cell .warning {
background-color: $warning-color;
color: white;
padding:2px 5px;
border-radius: 4px;
}

1
nezha-fronted/src/components/cli/webSSH.scss
View File

@@ -1,5 +1,4 @@
#shell-service { #shell-service {
border-top: 1px solid #aaa;
width: 100%; width: 100%;
left: 0; left: 0;
position: fixed; position: fixed;

13
nezha-fronted/src/components/common/deleteButton.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div :class="['delete-button',(deleteObjs.length<1?'':'delete-button-light')]"> <div :class="['delete-button',(deleteObjs.length<1?'':'delete-button-light')]">
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'nz-btn-disabled' : deleteObjs.length<1}" @click="batchDelete" :id="id"><span><i class="nz-icon nz-icon-delete" ></i></span></el-button> <button :id="id" :class="{'nz-btn-disabled' : deleteObjs.length<1}" class="top-tool-btn top-tool-btn--delete" @click="batchDelete"><span><i class="nz-icon nz-icon-delete" ></i></span></button>
</div> </div>
</template> </template>
<script> <script>
@@ -9,7 +9,6 @@ export default {
name: 'deleteButton', name: 'deleteButton',
props: { props: {
filterFunction: Function, filterFunction: Function,
// deleteObjs: Object,
deleteObjs: Array, deleteObjs: Array,
api: String, api: String,
clickFunction: Function, clickFunction: Function,
@@ -53,18 +52,14 @@ export default {
<style scoped> <style scoped>
.delete-button{ .delete-button{
margin-left: 20px; margin-left: 10px;
opacity: 0.7; opacity: 0.7;
border-radius: 2px; border-radius: 2px;
} }
.delete-button .nz-btn-disabled .nz-icon-delete{ .delete-button .nz-btn-disabled .nz-icon-delete{
opacity: 0.5; opacity: 0.5;
color: #D14A2B;
} }
.delete-button-light.delete-button{ .delete-button-light.delete-button{
border-radius: 2px; border-radius: 2px;
} }
.delete-button-light .nz-icon-delete{
color: #D14A2B;
}
</style> </style>

6
nezha-fronted/src/components/common/elementSet.vue
View File

@@ -101,7 +101,7 @@ export default {
}, },
// 点击第二个cancel // 点击第二个cancel
save () { save () {
this.$emit('update:customTableTitle', this.custom) this.$emit('update', this.custom)
localStorage.setItem( localStorage.setItem(
'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + ((typeof this.path !== 'undefined') ? this.path : this.$route.path), 'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + ((typeof this.path !== 'undefined') ? this.path : this.$route.path),
JSON.stringify(this.custom) JSON.stringify(this.custom)
@@ -131,8 +131,8 @@ export default {
border: 1px solid #EBEEF5; border: 1px solid #EBEEF5;
box-shadow: $pop-box-shadow; box-shadow: $pop-box-shadow;
position: absolute; position: absolute;
top: 83px; top: 55px;
right: 0; right: 20px;
width: 200px; width: 200px;
color: #606266; color: #606266;
background: #fff; background: #fff;

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -642,7 +642,7 @@ const en = {
language: 'Language', // "语言" language: 'Language', // "语言"
receiver: 'Receiver', // "用户组" receiver: 'Receiver', // "用户组"
createTime: 'Create time', // "创建时间" createTime: 'Create time', // "创建时间"
enable: 'Available', // "可用" enable: 'Enable', // "可用"
option: 'Operation', // "操作" option: 'Operation', // "操作"
// 侧滑框// // 侧滑框//
accountId: 'Account ID', // "用户ID" accountId: 'Account ID', // "用户ID"

160
nezha-fronted/src/components/common/mixin/table.js Normal file
View File

@@ -0,0 +1,160 @@
import bus from '@/libs/bus'
export default {
data () {
return {
// 侧滑
rightBox: {
show: false
},
/* 工具参数 */
tools: {
loading: false, // 是否显示table加载动画
customTableTitle: [] // 自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, // 主列表table高度
batchDeleteObjs: [],
object: {},
tableData: [],
searchLabel: {}, // 搜索参数
scrollbarWrap: null,
delFlag: false
}
},
methods: {
tableOperation ([command, row]) {
switch (command) {
case 'edit': {
this.edit(row)
break
}
case 'delete': {
this.del(row)
break
}
default:
break
}
},
newObject () {
return JSON.parse(JSON.stringify(this.blankObject))
},
pageNo (val) {
this.pageObj.pageNo = val
this.getTableData()
},
pageSize (val) {
this.pageObj.pageSize = val
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
this.getTableData()
},
add () {
this.object = this.newObject()
this.rightBox.show = true
},
closeRightBox (refresh) {
this.rightBox.show = false
if (refresh) {
this.delFlag = true
this.getTableData()
}
},
edit (u) {
this.object = JSON.parse(JSON.stringify(u))
this.rightBox.show = true
},
esc () {
this.rightBox.show = false
},
dragend () {
this.$nextTick(() => {
this.$refs.dataTable.doLayout()
})
},
search (searchObj) {
this.searchLabel = {}
this.pageObj.pageNo = 1
for (const item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item])
}
}
if (this.$refs.dataTable) {
this.$refs.dataTable.bodyWrapper.scrollTop = 0
}
this.getTableData()
},
tableDataSort (item) {
let orderBy = ''
if (item.order === 'ascending') {
orderBy = item.prop
}
if (item.order === 'descending') {
orderBy = '-' + item.prop
}
this.$set(this.searchLabel, 'orderBy', orderBy)
this.getTableData()
},
tableTitleReset (src, dist) {
dist.forEach(item => {
const title = src.find(t => t.prop === item.prop)
if (title && title.label) {
item.label = title.label
}
})
},
toTop (wrap) {
let currentTop = wrap.scrollTop
const interval = currentTop / 10
const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
if (currentTop === 0) {
clearInterval(intervalFunc)
} else {
currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
wrap.scrollTop = currentTop
}
}, 20)
},
toTopBtnHandler (wrap) {
const vm = this
wrap.addEventListener('scroll', bus.debounce(function () {
vm.tools.showTopBtn = wrap.scrollTop > 50
vm.tools.tableHover = wrap.scrollTop > 50
}, 100))
}
},
watch: {
tableData: {
deep: true,
handler (n) {
if (n.length === 0 && this.pageObj.pageNo > 1) {
this.pageNo(this.pageObj.pageNo - 1)
}
if (!this.delFlag) { // 不是删除时回到顶部
this.$refs.dataTable.bodyWrapper.scrollTop = 0
} else {
this.delFlag = false
}
}
},
'tools.customTableTitle': {
deep: true,
handler (n) {
this.dragend()
}
}
},
mounted () {
const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
if (pageSize != 'undefined' && pageSize != null) {
this.pageObj.pageSize = pageSize
}
this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
: this.tableTitle
this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
this.getTableData()
}
}

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

@@ -1,3 +1,6 @@
<style lang="scss">
$--input-focus-border: red;
</style>
<template> <template>
<div class="right-box right-box-account" v-clickoutside="{obj:editUser,func:clickOutside}"> <div class="right-box right-box-account" v-clickoutside="{obj:editUser,func:clickOutside}">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
@@ -109,9 +112,6 @@ export default {
return enabled.length === 0 return enabled.length === 0
} }
}, },
created () {
this.getRoles()
},
data () { data () {
const validatePassword = (rule, value, callback) => { // 确认密码的二次校验 const validatePassword = (rule, value, callback) => { // 确认密码的二次校验
if (value === '' && this.editUser.pin) { if (value === '' && this.editUser.pin) {
@@ -159,7 +159,6 @@ export default {
editUser: {}, editUser: {},
scripts: [], scripts: [],
selectableScripts: [], selectableScripts: [],
roles: [],
pinChange: '' pinChange: ''
} }
}, },
@@ -192,6 +191,7 @@ export default {
} }
}) })
} else { } else {
editUser.roleIds = this.roles.find(t => t.name == 'common').id
this.$post('sys/user/save', editUser).then(response => { this.$post('sys/user/save', editUser).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code === 200) { if (response.code === 200) {

65
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -185,7 +185,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<button @click="select" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" id="search-input-search"><i class="nz-icon nz-icon-search"></i></button> <button id="search-input-search" class="search-btn float-right" type="button" @click="select"><i class="nz-icon nz-icon-search"></i></button>
<!--<div class="new-search-btn" @click="select"> <!--<div class="new-search-btn" @click="select">
<i class="nz-icon nz-icon-search"></i> <i class="nz-icon nz-icon-search"></i>
</div>--> </div>-->
@@ -1342,26 +1342,43 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.search-btn {
height: 30px;
width: 32px;
border: none;
outline: none;
border-left: 1px solid #DEDEDE;
background-color: #F9F9F9;
.new-search{ i {
display: flex; color: #666;
position: relative; font-size: 14px;
line-height: 25px; }
}
.search-btn:focus:not(.nz-btn-disabled) {
background-color: $btn-light-background-color-hover;
i {
color: $btn-normal-background-color-new;
}
}
.top-tools input {
background-color: white;
}
.new-search{
display: flex;
position: relative;
line-height: 25px;
border-radius: 2px; border-radius: 2px;
border: 1px solid #D8D8D8; border: 1px solid #D8D8D8;
/*box-shadow: inset 0 0 5px 0 rgba(184,184,184,0.80);*/ /*box-shadow: inset 0 0 5px 0 rgba(184,184,184,0.80);*/
} }
.new-search .nz-btn {
box-shadow: 0 0 1px 1px #d8d8d8;
border-radius: 0 2px 2px 0;
}
.new-search .search-input-all{ .new-search .search-input-all{
width: 226px !important; width: 226px !important;
min-width: 226px; min-width: 226px;
background-color: $content-right-background-color; background-color: white;
color: rgba(0,0,0,.55); color: rgba(0,0,0,.55);
height: 28px; height: 30px;
line-height: 28px; line-height: 30px;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
display: flex; display: flex;
@@ -1371,13 +1388,13 @@ export default {
background-color: $content-right-background-color; background-color: $content-right-background-color;
} }
.search-input-all .btn-retract{ .search-input-all .btn-retract{
padding: 0px 4px; padding: 0 4px;
text-align: center; text-align: center;
} }
.search-input-all .search-history{ .search-input-all .search-history{
padding: 0px 7px; padding: 0px 7px;
height: 16px; height: 18px;
line-height: 16px; line-height: 18px;
text-align: center; text-align: center;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
margin-top: 6px; margin-top: 6px;
@@ -1388,20 +1405,6 @@ export default {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
/*.input-center-box::-webkit-scrollbar {
width: 4px;
height: 6px;
}
.input-center-box::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.input-center-box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}*/
.search-input-all .clear-search{ .search-input-all .clear-search{
padding: 0 5px; padding: 0 5px;
text-align: center; text-align: center;
@@ -1413,10 +1416,6 @@ export default {
.none{ .none{
display: none !important; display: none !important;
} }
.new-search-btn {
padding: 0 4px;
cursor: pointer;
}
.search-text{ .search-text{
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;

19
nezha-fronted/src/components/common/table/nz-table-column.js
View File

@@ -1,19 +0,0 @@
export default {
name: 'nz-data-table-column',
functional: true,
render (h, { data, props }) {
let children = []
const align = props.align
if (props.columns) {
children = props.columns.map(column =>
h('nz-data-table-column', {
props: Object.assign({}, { align }, column)
})
)
}
data.props = {
...data.props
}
return h('el-table-column', data, children)
}
}

139
nezha-fronted/src/components/common/table/nzDataList.vue Normal file
View File

@@ -0,0 +1,139 @@
<template>
<div :class="from" class="list-page">
<!-- 主页面 -->
<div :class="{'main-list-with-sub': bottomBox.showSubList}" class="main-list">
<!-- 顶部工具栏 -->
<div class="main-modal"></div>
<div v-show="bottomBox.mainResizeShow" class="top-tools">
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-main-right">
<div v-if="components.indexOf('searchInput') > -1" class="top-tool-search">
<search-input ref="searchInput" :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
</div>
<slot name="top-tool"></slot>
<button v-if="components.indexOf('elementSet') > -1" id="account-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div v-if="components.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
id="account-list"
ref="customTableTitle"
:custom-table-title="customTableTitle"
:original-table-title="tableTitle"
@close="tools.showCustomTableTitle = false"
@update="updateCustomTableTitle"
></element-set>
</transition>
<div v-show="bottomBox.mainResizeShow" class="nz-table2">
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div v-show="!bottomBox.showSubList" class="pagination-bottom">
<slot name="pagination"></slot>
</div>
</div>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList"
ref="bottomBox"
:from="from"
:is-full-screen="bottomBox.isFullScreen"
:obj="bottomBox.object"
:sub-resize-show="bottomBox.subResizeShow"
:target-tab.sync="bottomBox.targetTab"
@closeSubList="bottomBox.showSubList = false" @exitFullScreen="exitFullScreen" @fullScreen="fullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
</template>
<script>
import { bottomBoxWindow } from '@/components/common/js/tools'
export default {
name: 'nzDataList',
props: {
from: {
type: String,
default: ''
},
tableTitle: {
type: Array
},
customTableTitle: {
type: Array
},
components: {
type: Array,
default () { return [] }
},
searchMsg: {
type: Object
},
tableId: {
type: String,
default: ''
}
},
data () {
return {
/* 二级页面相关 */
bottomBox: {
object: {},
mainResizeShow: true, // dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false, // 全屏状态
showSubList: false, // 是否显示二级列表
targetTab: '', // 显示二级列表中的哪个页签
inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
},
tools: {
toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
tableHover: false, // 控制滚动条和top按钮同时出现
showCustomTableTitle: false // 自定义列弹框是否显示
}
}
},
methods: {
updateCustomTableTitle (custom) {
this.$emit('update:customTableTitle', custom)
},
// 全屏
fullScreen () {
const vm = this
// this.$bottomBoxWindow.fullScreen(vm)
bottomBoxWindow.fullScreen(vm)
},
// 退出全屏
exitFullScreen () {
const vm = this
bottomBoxWindow.exitFullScreen(vm)
},
// 鼠标拖动二级列表
listResize (e) {
const vm = this
bottomBoxWindow.listResize(vm, e)
},
showBottomBox (targetTab, row) {
this.bottomBox.targetTab = targetTab
this.bottomBox.object = JSON.parse(JSON.stringify(row))
this.bottomBox.showSubList = true
},
search (searchObj) {
this.$emit('search', searchObj)
}
},
watch: {
'bottomBox.showSubList': function (n) {
const vm = this
bottomBoxWindow.showSubListWatch(vm, n)
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/tableCommon.scss';
</style>

24
nezha-fronted/src/components/layout/container.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="container">
<router-view/>
</div>
</template>
<script>
export default {
name: 'container',
data () {
return {
}
}
}
</script>
<style scoped>
.container {
padding: 10px;
box-sizing: border-box;
height: calc(100% - 50px);
background-color: #f6f6f6;
}
</style>

590
nezha-fronted/src/components/layout/header.vue Normal file
View File

@@ -0,0 +1,590 @@
<template>
<div class="header">
<el-breadcrumb class="nz-breakcrumb" separator="/">
<el-breadcrumb-item v-for="crumb in breadcrumb" :key="crumb.code">{{$t(crumb.i18n)}}</el-breadcrumb-item>
</el-breadcrumb>
<div class="header-menu">
<template v-for="(menu, index) in getMenuList">
<template v-if="menu.code === 'header' && menu.children && menu.children.length > 0">
<template v-for="(subMenu, subIndex) in menu.children">
<el-dropdown v-if="subMenu.code === 'header_link'" :key="subIndex">
<div class="header-menu--item"><i class="nz-icon nz-icon-more-app"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, index) in linkData" :key="index" :index="'0-' + index">
<span class="link-title"><a :href='item.url' :title="item.name" rel="noopener norefferrer" target="_blank">{{item.name}}</a></span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown v-if="subMenu.code === 'header_terminal'" :key="subIndex">
<div id="header-open-cli" @click="cli">
<div class="header-menu--item"><i class="nz-icon nz-icon-terminal"></i></div>
<span v-show="$store.state.consoleCount>0" class="right-tip">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</span>
</div>
</el-dropdown>
<el-dropdown v-if="subMenu.code === 'header_add'" :key="subIndex">
<div class="header-menu--item"><i class="nz-icon nz-icon-create-square"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item, createIndex) in createMenu" :key="createIndex" v-has="item.permission" :index="`${index}-${subIndex}-${createIndex}`">
<div :id="'create-box-'+createIndex" @click="createBox(item)">
<span>{{item.label}}</span>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</template>
</template>
</div>
<!--个人操作-->
<div class="personal">
<el-dropdown>
<div class="header-menu--item">
<i class="nz-icon nz-icon-language-change"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div id="header-to-english" :style="language=='en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
</el-dropdown-item>
<el-dropdown-item>
<div id="header-to-chinese" :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown>
<div class='login-user header-menu--item'>{{username}}&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div id="header-to-changepwd" @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div id="header-to-logout" @click="logout">{{$t('overall.signOut')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<transition name="right-box">
<project-box v-if="rightBox.project.show" ref="projectBox" :project="editProject" @close="closeProjectRightBox"></project-box>
</transition>
<transition name="right-box">
<module-box v-if="rightBox.module.show" ref="moduleBox" :currentProject="currentProject" :module="editModule" @close="closeModuleRightBox"></module-box>
</transition>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.endpoint.show" ref="addEndpointBox" :currentModule="currentModule" :currentProject="currentProject" @close="closeEndpointRightBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<asset-box v-if="rightBox.asset.show" ref="assetAddUnit" :asset="editAsset" @close="closeAssetRightBox"></asset-box>
</transition>
<transition name="right-box">
<alert-config-box v-if="rightBox.alertRule.show" ref="alertConfigBox" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox"></alert-config-box>
</transition>
<transition name="right-box">
<dc-box v-if="rightBox.dc.show" :dc="dc" :user-data="userData" @close="closeDcBox" @reload="getAssetData"></dc-box>
</transition>
<change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
</div>
</template>
<script>
import bus from '../../libs/bus'
import dcBox from '../common/rightBox/dcBox' // dc弹框
import { mapActions } from 'vuex'
import changePwd from '../page/config/changePwd'
export default {
name: 'Header',
components: {
'change-password': changePwd,
'dc-box': dcBox
},
data () {
return {
username: sessionStorage.getItem('nz-username'),
language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
// 顶部菜单相关
/* activeIndex: '', */
activeItemIndex: '',
activeItemIndexes: [],
hoverItemIndex: '',
dc: {
id: '',
name: '',
location: '',
tel: '',
principal: '',
area: {
id: 0,
name: ''
}
},
userData: [],
assetData: [], // 顶部菜单asset的下拉内容
// add侧滑相关
rightBox: {
project: { show: false },
module: { show: false },
endpoint: { show: false },
asset: { show: false },
alertRule: { show: false },
dc: { show: false }
},
projectData: [], // 顶部菜单project列表中的数据
editProject: { id: '', name: '', remark: '' }, // 新增/编辑的project
currentProject: { id: '', name: '', remark: '' }, // module/endpoint弹框用来回显project
editModule: { type: 'http', name: '', project: {}, port: 9100, path: '', param: '', paramObj: [], labelModule: [], labels: '' }, // 新增/编辑的module
currentModule: { id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], labels: '', labelModule: [] }, // endpoint弹框用来回显module，此处固定为空对象
editEndpoint: { // 新增/编辑的endpoint
id: '',
host: '',
port: '',
param: '',
path: '',
asset: { id: '', name: '', host: '' },
project: { id: '', name: '' },
module: { id: '', name: '', param: '', paramObj: {}, projectId: '', labelModule: [], labels: '' },
moduleId: '',
assetId: '',
labelModule: []
},
editAsset: {
id: '',
sn: '',
host: '',
state: 1,
purchaseDate: '',
idcId: '',
cabinetId: '',
modelId: '',
model: { type: { code: '' } },
assetType: '',
impi: {
host: '',
port: ''
},
tags: [],
accounts: []
},
editAlertRule: {
id: '',
alertName: '',
linkObject: { id: '', name: '' },
expr: '',
unit: 2,
operator: '>',
last: 60,
severity: 'P2',
summary: '',
description: ''
},
createMenu: [ // 新增按钮内容
{
label: this.$t('project.project.project'),
url: 'project',
type: 1,
permission: 'header_add_project'
},
{
label: this.$t('project.module.module'),
url: 'project',
type: 2,
permission: 'header_add_module'
},
{
label: this.$t('project.endpoint.endpoint'),
url: 'project',
type: 3,
permission: 'header_add_endpoint'
},
{
label: this.$t('asset.asset'),
url: 'asset',
type: 4,
permission: 'header_add_asset'
},
{
label: this.$t('alert.config.alertConfig'),
url: 'alertConfig',
type: 5,
permission: 'header_add_rule'
}
],
showChangePwd: false
}
},
methods: {
...mapActions(['logoutSuccess']),
cli () {
this.$store.commit('openConsole')
},
/**
* @param route 路由地址
* @param parentMenu 菜单大类
* */
jumpTo (route) {
if (route != 'asset') {
this.activeItemIndexes = []
}
this.$router.push({
path: route,
query: {
t: +new Date()
}
})
},
getLinkData () {
this.$get('link').then(response => {
this.$store.commit('setLinkData', response.data)
})
},
createBox (item) {
if (item.type == 1) {
this.rightBox.project.show = true
this.editProject = { id: '', name: '', remark: '' }
} else if (item.type == 2) {
this.rightBox.module.show = true
this.editModule = {
name: '',
project: {},
port: 9100,
path: '',
param: '',
labels: '',
type: 'http',
paramObj: [],
snmpParam: '',
labelModule: [],
// snmp setting 下划线命名是因为业务需求
walk: [],
version: 2, // 2/3
max_repetitions: 25,
retries: 3,
timeout: 10, // s
community: 'public',
username: '',
security_level: 'noAuthNoPriv', // noAuthNoPriv/authNoPriv/authPriv
password: '',
auth_protocol: 'MD5', // MD5/SHA
priv_protocol: 'DES', // DES/AES
priv_password: '',
context_name: ''
}
} else if (item.type == 3) {
this.rightBox.endpoint.show = true
} else if (item.type == 4) {
this.rightBox.asset.show = true
} else if (item.type == 5) {
this.rightBox.alertRule.show = true
} else if (item.type == 6) {
this.rightBox.dc.show = true
}
},
jumpToAsset (dc) {
if (dc) {
this.activeItemIndex = dc.id
this.$store.commit('setCurrentDc', dc.id)
bus.$emit('header-dc-change', dc.id) // 发送给leftMenu，顶部dc条件改变了
} else {
this.activeItemIndex = ''
this.$store.commit('setCurrentDc', '')
bus.$emit('clear-asset-filter') // 清除leftMenu左侧菜单过滤条件
}
this.jumpTo('/asset')
},
jumpToProject (p) {
if (!this.hasButton('project_view')) {
return
}
this.currentProject = p
if (p.id !== this.$store.state.currentProject.id) {
bus.$emit('project-page-type', 'project')
}
this.$store.commit('currentProjectChange', p)
this.activeItemIndex = p.id
this.jumpTo('/project')
},
getAssetData () {
this.$get('idc', { pageSize: -1 }).then(response => {
if (response.code == 200) {
this.assetData = response.data.list
this.assetData.forEach(item => {
this.$set(item, item.name, false)
})
this.$store.commit('setIdcArr', this.assetData)
}
})
},
changeLocal (lang) {
if (lang != localStorage.getItem('nz-language')) {
localStorage.setItem('nz-language', lang)
this.$i18n.locale = lang
window.location.reload()
}
},
getProjectList () {
this.$get('project', { pageSize: -1 }).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.activeItemIndex = this.currentProject.id
this.$store.commit('currentProjectChange', this.currentProject)
}
}
})
},
getUserData () {
return new Promise(resolve => {
this.$get('sys/user/list', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
resolve()
})
})
},
closeProjectRightBox (refresh) {
this.rightBox.project.show = false
if (refresh) {
this.getProjectList()
bus.$emit('project-list-change')
}
},
closeModuleRightBox (refresh) {
this.rightBox.module.show = false
if (refresh) {
bus.$emit('module-list-change')
}
},
closeEndpointRightBox (refresh) {
this.rightBox.endpoint.show = false
if (refresh) {
bus.$emit('endpoint-list-change')
}
},
closeAssetRightBox (refresh) {
this.rightBox.asset.show = false
if (refresh) {
bus.$emit('asset-list-change')
}
},
closeAlertRuleRightBox (refresh) {
this.rightBox.alertRule.show = false
if (refresh) {
bus.$emit('alert-rule-list-change')
}
},
closeDcBox (refresh) {
this.rightBox.dc.show = false
if (refresh) {
this.getAssetData()
bus.$emit('dc-list-change')
}
},
toEditProject (p) {
this.editProject = Object.assign({}, p)
this.rightBox.project.show = true
},
logout () {
this.$get('logout').then(() => {
this.logoutSuccess()
document.location.href = '/'
})
// this.jumpTo('/login');
},
refreshLang () {
this.language = localStorage.getItem('nz-language')
this.$i18n.locale = this.language
this.$nextTick(() => {
window.location.reload()
})
},
showPwdDialog () {
this.showChangePwd = true
},
dialogClosed () {
this.showChangePwd = false
},
cancel () {
this.jumpTo(this.$route.path.slice(1, this.$route.path.length))
},
initEvent () {
bus.$on('login', () => {
this.username = sessionStorage.getItem('nz-username')
this.refreshLang()
})
bus.$on('dc-list-change', () => { // dc.vue增删改dc时刷新顶部菜单dc列表
this.getAssetData()
})
bus.$on('current-project-change', project => {
this.currentProject = project
this.activeItemIndex = project.id
})
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)
window.addEventListener('popstate', this.cancel, false)
}
}
},
mounted () {
this.$i18n.locale = this.language
if (sessionStorage.getItem('nz-token')) {
this.initEvent()
this.getAssetData()
this.getUserData()
this.getProjectList()
this.getLinkData()
}
// 刷新后有高亮
/* let activePath = this.$route.path.slice(1);
this.activeIndex = activePath; */
},
computed: {
linkData () {
return this.$store.getters.getLinkData
},
route () {
return this.$route.path
},
overViewProject () {
return this.$store.getters.getOverViewProject
},
menuIsActive () {
return function (menu, isParent) {
if (isParent) {
const isCurrent = menu.children.some(sub => {
return sub.route == this.route
})
if (isCurrent) {
return 'menu-active'
} else {
return ''
}
} else {
if (menu.route == this.route) {
return 'menu-item-active'
} else {
return ''
}
}
}
},
breadcrumb () {
const vm = this
const menuList = this.$store.getters.menuList
const breadcrumb = []
getBreadCrumb(menuList, breadcrumb)
function getBreadCrumb (list, crumb) {
for (let i = 0; i < list.length; i++) {
if (list[i].route === vm.$route.path) {
crumb.unshift(list[i])
return true
} else {
if (getBreadCrumb(list[i].children, crumb)) {
crumb.unshift(list[i])
}
}
}
}
return breadcrumb
}
},
watch: {
overViewProject (n) {
if (n) {
this.jumpToProject(n)
}
}
},
beforeDestroy () {
bus.$off('login')
bus.$off('dc-list-change')
bus.$off('current-project-change')
},
destroyed () {
window.removeEventListener('popstate', this.cancel, false)
}
}
</script>
<style lang="scss">
.header {
display: flex;
height: 50px;
.header-menu {
display: flex;
justify-content: flex-end;
flex-grow: 1;
.el-dropdown {
width: 60px;
text-align: center;
height: 36px;
line-height: 50px;
}
}
.header-menu--item {
color: #778391;
cursor: pointer;
transition: color linear .2s;
i {
font-size: 18px;
}
}
.header-menu--item:hover {
color: #313336;
}
.personal {
display: flex;
.el-dropdown {
margin: 0 10px 0 30px;
height: 36px;
line-height: 50px;
text-align: center;
}
.login-user {
color: #333;
i {
color: #999;
font-size: 12px;
}
}
}
.right-tip {
position: absolute;
left: 30px;
bottom: 27px;
padding: 0 6px;
line-height: 15px;
height: 15px;
background-color: #ba3939;
opacity: .9;
border-radius: 7px;
color: white;
font-size: 6px;
}
}
.link-title a {
color: inherit;
text-decoration: none;
}
.nz-breakcrumb {
padding-left: 20px;
line-height: 50px;
.el-breadcrumb__item .el-breadcrumb__inner {
color: #999;
}
}
</style>

62
nezha-fronted/src/components/layout/home.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="home">
<left-menu @refresh="refresh"></left-menu>
<div ref="body" class="body">
<Header></Header>
<container v-if="containerShow" ref="container"></container>
</div>
<!--菜单列表-->
<menus v-if="isMenuPage"></menus>
<!--web-ssh-->
<web-ssh ref="webSsh"></web-ssh>
<!--table悬浮提示容器-->
<span class="el-popover table-tooltip"></span>
</div>
</template>
<script>
import Header from './header'
import webSSH from '../cli/webSSH'
import leftMenu from './leftMenu'
import menus from '../page/config/menus'
import container from './container'
export default {
name: 'home',
components: {
Header,
menus,
leftMenu,
container,
'web-ssh': webSSH
},
data () {
return {
containerShow: true
}
},
computed: {
isMenuPage: function () {
return this.$route.path === '/menu'
}
},
methods: {
refresh () {
this.containerShow = false
this.$nextTick(() => { this.containerShow = true })
}
}
}
</script>
<style lang="scss">
.home {
display: flex;
transition: all .2s;
.body {
display: flex;
flex-direction: column;
flex: auto;
transition: all .2s;
}
}
</style>

238
nezha-fronted/src/components/layout/leftMenu.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<div class="left-menu">
<el-menu :collapse="isShrink" active-text-color="#ffffff" class="header-logo" text-color="#ffffff">
<el-menu-item index="logo">
<div id="home-to-overview" class="logo link">
<img alt="loading..." height="26" src="../../assets/img/logo1-2.png"/>
<span class="system-name">{{systemName && systemName !== 'undefined' ? systemName : $t('dashboard.overview.contentTitle')}}</span>
</div>
</el-menu-item>
</el-menu>
<el-menu :collapse="isShrink" :default-active="route" active-text-color="#FA901C" background-color="#202F3F" class="menu-list" mode="vertical" text-color="#BEBEBE" @select="jump">
<template v-for="(menu, index) in menuList">
<el-submenu v-if="menu.children && menu.children.length > 0" :key="index" :index="`${index}`">
<template slot="title">
<i :class="getIcon(menu)"></i>
<span slot="title">{{$t(menu.i18n)}}</span>
</template>
<template v-for="(secondMenu, secondIndex) in menu.children">
<el-submenu v-if="secondMenu.children && secondMenu.children.length > 0" :key="secondIndex" :index="`${index}-${secondIndex}`">
<span slot="title">{{$t(secondMenu.i18n)}}</span>
<el-menu-item v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`" :index="thirdMenu.route">{{$t(thirdMenu.i18n)}}</el-menu-item>
</el-submenu>
<el-menu-item v-else :key="secondIndex" :index="secondMenu.route">{{$t(secondMenu.i18n)}}</el-menu-item>
</template>
</el-submenu>
<el-menu-item v-else :key="index" :index="menu.route">
<i :class="getIcon(menu)"></i>
<span slot="title">{{$t(menu.i18n)}}</span>
</el-menu-item>
</template>
</el-menu>
<div class="left-menu--pin" @click="shrink"><i :class="{'icon-reverse': isShrink}" class="el-icon-s-fold"></i></div>
</div>
</template>
<script>
export default {
name: 'leftMenu',
props: {
},
data () {
return {
isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
systemName: localStorage.getItem('nz-sys-name')
}
},
computed: {
menuList () {
let allMenu = this.$store.getters.menuList
allMenu = allMenu.filter(menu => {
return menu.code !== 'header'
})
excludeButton(allMenu)
return allMenu
function excludeButton (menu) {
for (let i = 0; i < menu.length; i++) {
if (menu[i].type === 2) {
menu.splice(i, 1)
i--
} else {
if (menu[i].children && menu[i].children.length > 0) {
excludeButton(menu[i].children)
}
}
}
}
},
route () {
return this.$route.path
}
},
methods: {
shrink () {
this.isShrink = !this.isShrink
localStorage.setItem('nz-left-menu-shrink', this.isShrink)
},
jump (route) {
if (route === this.route) {
this.refresh()
}
this.$router.push({
path: route,
query: {
t: +new Date()
}
})
},
refresh () {
this.$emit('refresh')
},
getIcon (menu) {
let className = ''
switch (menu.code) {
case 'dashboard': {
className = 'nz-icon nz-icon-menu-dashboard'
break
}
case 'asset': {
className = 'nz-icon nz-icon-menu-assets'
break
}
case 'project': {
className = 'nz-icon nz-icon-menu-project'
break
}
case 'alert': {
className = 'nz-icon nz-icon-menu-alert'
break
}
case 'settings': {
className = 'nz-icon nz-icon-menu-setting'
break
}
default:
break
}
return className
}
}
}
</script>
<style lang="scss">
.left-menu {
display: flex;
flex-direction: column;
height: 100%;
background-color: #202F3F;
.el-menu-item .nz-icon, .el-submenu .nz-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
font-size: 18px;
}
>.el-menu:not(.el-menu--collapse) {
width: 240px;
}
>.el-menu.menu-list {
height: calc(100% - 110px);
border-right: none;
overflow: auto;
>.el-submenu.is-active .el-submenu__title {
background-color: #101B27 !important;
}
.el-submenu.is-active .el-submenu__title, .el-submenu.is-active .el-submenu__title>i {
color: white !important;
}
.el-submenu.is-opened .el-menu-item:not(.is-active) {
background-color: #182534 !important;
}
.el-menu-item.is-active {
background-color: #101B27 !important;
}
.el-menu-item, .el-submenu__title {
height: 46px;
line-height: 46px;
}
}
/*---滚动条默认显示样式--*/
>.el-menu::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,.4);
border-radius: 2px;
border: none;
}
/*---鼠标点击滚动条显示样式--*/
>.el-menu::-webkit-scrollbar-thumb:hover {
background-color: rgba(255,255,255,.3);
border-radius: 2px;
}
/*---滚动条大小--*/
>.el-menu::-webkit-scrollbar {
width: 6px;
height: 14px;
}
.left-menu--pin {
position: fixed;
bottom: 20px;
left: 20px;
height: 20px;
width: 20px;
line-height: 20px;
color: white;
font-size: 20px;
font-weight: 100;
i {
transform: rotateY(0);
transition: transform .4s;
}
i.icon-reverse {
transform: rotateY(180deg);
}
}
>.el-menu.header-logo {
border-right: none;
>.el-menu-item {
padding: 13px 0 0 18px !important;
height: 50px;
border-right: 1px solid #202F3F;
box-sizing: border-box;
background-color: #182534 !important;
.logo {
display: flex;
box-sizing: border-box;
img {
box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
}
.system-name {
padding-left: 5px;
color: white;
font-size: 12px;
letter-spacing: 0;
line-height: 34px;
font-weight: 400;
}
}
}
}
}
.el-menu--popup {
.el-menu-item {
height: 49px;
line-height: 49px;
}
.el-menu-item.is-active {
background-color: #101B27 !important;
}
}
</style>

358
nezha-fronted/src/components/page/config/account2.vue Normal file
View File

@@ -0,0 +1,358 @@
<template>
<div style="height: 100%">
<nz-data-list
ref="dataList"
:components="['searchInput', 'elementSet']"
:custom-table-title.sync="tools.customTableTitle"
:search-msg="searchMsg"
:table-id="tableId"
:table-title="tableTitle"
from="account">
<template v-slot:top-tool>
<button id="account-add" v-has="'account_toAdd'" :title="$t('overall.createAccount')" class="top-tool-btn margin-l-20"
type="button" @click="add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button id="account-list-batch-delete" v-has="'account_delete'" :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}" api="sys/user/delete" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default="slotProps">
<el-table
id="account-list-table"
ref="dataTable"
v-loading="tools.loading"
:data="tableData"
:height="mainTableHeight"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="(selection)=>{batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:width="`${item.width}`"
class="data-column"
>
<template slot="header">
<span v-if="item.type == 'tag'" :title="item.label" class="tag-header"><span class="tag-value">{{item.label}}</span><span class="tag-mark">&nbsp;[Tag]</span></span>
<span v-else>
<span>{{item.label}}</span>
<div class="col-resize-area"></div>
</span>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop === 'roles'">
<template v-if="scope.row[item.prop]">
<template v-for="(role, index) in scope.row[item.prop]">
<span v-if="role" :key="index">{{role.i18n?$t(role.i18n):role.name}}</span>
</template>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop == 'status'">
<el-switch
v-model="scope.row.status"
:disabled="isCurrentUser(scope.row.username) || !hasButton('account_toEdit') || !hasButton('account_toAdd') || (scope.row.username==='admin' && scope.row.userId==1)"
active-color="#ee9d3f"
active-value="1"
inactive-value="0"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
</template>
<span v-else-if="item.prop == 'tags'">{{filterTags(item, scope)}}</span>
<span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
fixed="right"
width="165">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['edit', scope.row]" ><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item :command="['delete', scope.row]" ><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
</el-table>
<!-- 回到table顶部的按钮 -->
<button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="account-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<account-box v-if="rightBox.show" :roles="roles" :user="object" @close="closeRightBox"></account-box>
</transition>
</div>
</template>
<script>
import deleteButton from '../../common/deleteButton'
import accountBox from '../../common/rightBox/accountBox'
import nzDataList from '@/components/common/table/nzDataList'
import bus from '../../../libs/bus'
import tableMixin from '@/components/common/mixin/table'
export default {
name: 'account',
components: {
nzDataList,
accountBox,
deleteButton
},
mixins: [tableMixin],
data () {
return {
tableId: 'accountTable', // 需要分页的table的id，用于记录每页数量
blankObject: { // 空白对象
userId: '',
username: '',
email: '',
status: '1',
createTime: '',
receiver: [],
roleIds: 0,
roles: [],
lang: '',
notifications: []
},
pageObj: { // 分页对象
pageNo: 1,
pageSize: this.$CONSTANTS.defaultPageSize,
total: 0
},
tableTitle: [ // 原table列
{
label: 'ID',
prop: 'userId',
show: true,
width: 80
}, {
label: this.$t('config.account.account'),
prop: 'username',
show: true,
width: 200
}, {
label: this.$t('config.account.roles'),
prop: 'roles',
show: true,
width: 200
}, {
label: 'E-mail',
prop: 'email',
show: true
}, {
label: this.$t('config.account.createTime'),
prop: 'createTime',
show: true,
width: 200
}, {
label: this.$t('config.account.enable'),
prop: 'status',
show: true,
width: 100
}
],
searchMsg: { // 给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 10,
name: this.$t('config.account.account'),
type: 'input',
label: 'username',
disabled: false
}]
},
roles: []
}
},
methods: {
del (u) {
if (u.userId == 1 && u.username === 'admin') { return }
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete('sys/user/delete?userIds=' + u.userId).then(response => {
if (response.code === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.getTableData()
} else {
this.$message.error(response.msg)
}
})
})
},
getTableData () {
if (!this.hasButton('account_view')) {
this.$message.error(this.$t('tip.noAccess'))
return
}
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
this.tools.loading = true
this.$get('sys/user/list', this.searchLabel).then(response => {
this.tools.loading = false
if (response.code === 200) {
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
this.pageObj.total = response.data.total
if (!this.scrollbarWrap) {
this.$nextTick(() => {
this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
this.toTopBtnHandler(this.scrollbarWrap)
})
}
}
})
},
/* add () {
this.object = this.newObject()
if (!this.user.userId) {
this.user.roleIds = this.roles.find(t => t.name == 'common').id
}
this.rightBox.show = true
},
edit (u) {
this.object = JSON.parse(JSON.stringify(u))
if (!this.object.userId) {
this.object.roleIds = this.roles.find(t => t.name == 'common').id
}
this.rightBox.show = true
}, */
statusChange (user) {
if (user.roles) {
user.roleIds = user.roles.map(t => t.id)
}
this.$put('sys/user/update', user).then(response => {
if (response.code === 200) {
this.rightBox.show = false
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
} else {
this.$message.error(response.msg)
}
this.getTableData()
})
},
getRoles () {
this.roles = []
this.$get('sys/role?pageSize=-1').then(response => {
if (response.code == 200) {
this.roles = response.data.list
} else {
this.$message.error('load roles faild')
}
})
},
resetTableTitle () {
const title = this.tools.customTableTitle
const tableTitle = title.slice(0, this.tableTitle.length)
const tagTitle = title.slice(this.tableTitle.length, title.length)
this.$get('/alert/script?pageNo=1&pageSize=-1').then(response => {
let scripts = response.data.list
scripts = scripts.map(item => {
return { label: item.name, prop: 'tags', show: false, allowed: true, scriptId: item.id, type: 'tag' }
})
const newTags = scripts.filter(item => { return !tagTitle.find(t => { return item.label == t.label }) })
const keepTags = tagTitle.filter(item => { return scripts.find(t => { return item.label == t.label }) })
keepTags.forEach(item => {
const script = scripts.find(t => { return item.label == t.label })
item.scriptId = script.scriptId
})
let result = tableTitle.concat([{ label: this.$t('config.account.notification'), show: false, NotSet: true, type: 'title', prop: 'table-tag' }])
result = result.concat(keepTags).concat(newTags)
this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
})
},
filterTags (head, scope) {
if (scope.row.notifications) {
const notification = scope.row.notifications.find(item => {
return head.scriptId === item.scriptId
})
if (notification) {
return notification.account
}
}
}
},
beforeDestroy () {
if (this.scrollbarWrap) {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
}
},
computed: {
isCurrentUser () {
return function (username) {
return localStorage.getItem('nz-username') == username
}
}
},
/*watch: {
'bottomBox.showSubList': function (n) {
const vm = this
this.$bottomBoxWindow.showSubListWatch(vm, n)
},
tableData: {
deep: true,
handler (n) {
if (n.length === 0 && this.pageObj.pageNo > 1) {
this.pageNo(this.pageObj.pageNo - 1)
}
if (!this.delFlag) { // 不是删除时回到顶部
this.$refs.dataTable.bodyWrapper.scrollTop = 0
} else {
this.delFlag = false
}
}
}
},*/
created () {
// 是否存在分页缓存
/*const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
if (pageSize != 'undefined' && pageSize != null) {
this.pageObj.pageSize = pageSize
}*/
},
mounted () {
this.getRoles()
this.resetTableTitle()
// 初始化表头
/*this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
: this.tableTitle
this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
this.resetTableTitle()
this.getTableData()*/
}
}
</script>

183
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -1,10 +1,8 @@
<style> <style lang="scss">
.dc { @import '@/assets/css/common/tableCommon.scss';
height: 100%;
}
</style> </style>
<template> <template>
<div class="dc" > <div class="dc list-page">
<!--dc table start--> <!--dc table start-->
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}"> <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div> <div class="main-modal"></div>
@@ -14,10 +12,14 @@
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input> <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
</div> </div>
<button :title="$t('overall.createDatacenter')" @click="add" type="button" v-has="'dc_toAdd'" <button :title="$t('overall.createDatacenter')" @click="add" type="button" v-has="'dc_toAdd'"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add"> id="dc-add" class="top-tool-btn margin-l-20">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
<delete-button :delete-objs="batchDeleteObjs" @before="delFlag=true" @after="getTableData" api="idc" v-has="'dc_delete'" id="dc-list-batch-delete"></delete-button> <delete-button :delete-objs="batchDeleteObjs" @before="delFlag=true" @after="getTableData" api="idc" v-has="'dc_delete'" id="dc-list-batch-delete"></delete-button>
<button id="account-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
@@ -32,100 +34,86 @@
ref="customTableTitle" ref="customTableTitle"
></element-set> ></element-set>
</transition> </transition>
<el-table <div class="nz-table2">
id="dc-list-table" <el-table
class="nz-table" v-show="bottomBox.mainResizeShow"
:data="tableData" id="dc-list-table"
border ref="dcTable"
tooltip-effect="light" v-loading="tools.loading"
v-show="bottomBox.mainResizeShow" :cell-class-name="assetStatClassName"
:height="mainTableHeight" :data="tableData"
ref="dcTable" :height="mainTableHeight"
v-loading="tools.loading" border
:cell-class-name="assetStatClassName" tooltip-effect="light"
style="width: 100%;" @sort-change="tableDataSort"
@sort-change="tableDataSort" @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
type="selection"
width="40"
align="center">
</el-table-column>
<el-table-column
:resizable="true"
show-overflow-tooltip
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop,'dc')"
:prop="$tableSet.propTitle(item.prop,'dc')"
> >
<template slot-scope="scope" :column="item"> <el-table-column
<div v-if="item.prop == 'option'" class="content-right-options"> :resizable="false"
<span :id="'dc-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'dc_toEdit'"><i class="nz-icon nz-icon-edit"></i></span> align="center"
&nbsp; type="selection"
<span :id="'dc-setting-'+scope.row.id" :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" v-has="'dc_trafficSetting'" ><i class="nz-icon nz-icon-gear"></i></span> width="55">
&nbsp; </el-table-column>
<span :id="'dc-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i></span> <el-table-column
</div> v-for="(item, index) in tools.customTableTitle"
<template v-else-if="item.prop == 'principal'"> v-if="item.show"
<template v-if="scope.row.principal"> :key="`col-${index}`"
<template v-for="item in userData"> :label="item.label"
<template v-if="scope.row.principal == item.userId">{{item.username}}</template> :prop="$tableSet.propTitle(item.prop,'dc')"
:resizable="true"
:sortable="sortableShow(item.prop,'dc')"
show-overflow-tooltip
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'principal'">
<template v-if="scope.row.principal">
<template v-for="item in userData">
<template v-if="scope.row.principal == item.userId">{{item.username}}</template>
</template>
</template> </template>
<template v-else>-</template>
</template> </template>
<template v-else>-</template> <template v-else-if="item.prop == 'state'">
</template> <el-switch
<template v-else-if="item.prop == 'state'"> v-model="scope.row.state"
<el-switch :disabled="!hasButton('dc_toEdit') || !hasButton('dc_toEdit')"
v-model="scope.row.state" active-color="#ee9d3f"
active-value="ON" active-value="ON"
inactive-value="OFF" inactive-value="OFF"
:disabled="!hasButton('dc_toEdit') || !hasButton('dc_toEdit')" @change="(val)=>{statusChange(scope.row)}"
active-color="#ee9d3f" />
@change="(val)=>{statusChange(scope.row)}" </template>
/> <template v-else-if="item.prop == 'longitude'">
</template> <template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
<template v-else-if="item.prop == 'longitude'"> <template v-else>-</template>
<template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template> </template>
<template v-else>-</template> <template v-else-if="item.prop == 'latitude'">
</template> <template v-if="regNumTest(scope.row.latitude)">{{scope.row.latitude}}</template>
<template v-else-if="item.prop == 'latitude'"> <template v-else>-</template>
<template v-if="regNumTest(scope.row.latitude)">{{scope.row.latitude}}</template> </template>
<template v-else>-</template> <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
</template> <el-popover
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat"> :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended"
<el-popover placement="top"
placement="top" trigger="hover">
trigger="hover" <div slot="reference" class="dc-asset-states">
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended"> <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<div slot="reference" class="dc-asset-states"> <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span> <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span> <span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span> </div>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span> </el-popover>
</div>
</el-popover>
</template > </template >
<template v-else-if="item.prop == 'cabinetNum'"> <template v-else-if="item.prop == 'cabinetNum'">
<span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span> <span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span>
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template> </template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> </el-table-column>
<template v-else>-</template> </el-table>
</template> </div>
</el-table-column>
<el-table-column width="28" :resizable="false">
<template slot="header">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow" id="dc-list-totop"><i class="nz-icon nz-icon-top"></i></button> <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow" id="dc-list-totop"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList"> <div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
@@ -249,11 +237,6 @@ export default {
label: this.$t('config.dc.state'), label: this.$t('config.dc.state'),
prop: 'state', prop: 'state',
show: true show: true
}, {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 120
} }
], ],
tableData: [], tableData: [],

126
nezha-fronted/src/components/page/config/model.vue
View File

@@ -1,10 +1,8 @@
<style scoped> <style lang="scss">
.model { @import '@/assets/css/common/tableCommon.scss';
height: 100%;
}
</style> </style>
<template> <template>
<div class="model"> <div class="model list-page">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}"> <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div> <div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow"> <div class="top-tools" v-show="bottomBox.mainResizeShow">
@@ -12,10 +10,14 @@
<div class="top-tool-search"> <div class="top-tool-search">
<search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input> <search-input :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
</div> </div>
<button :title="$t('overall.createModel')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="model-add" v-has="'model_toAdd'"> <button id="model-add" v-has="'model_toAdd'" :title="$t('overall.createModel')" class="top-tool-btn margin-l-20" @click="add">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
<delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="model" v-has="'model_delete'" id="model-list-batch-delete"></delete-button> <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="model" v-has="'model_delete'" id="model-list-batch-delete"></delete-button>
<button id="account-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
@@ -30,66 +32,55 @@
ref="customTableTitle" ref="customTableTitle"
></element-set> ></element-set>
</transition> </transition>
<el-table :data="tableData" <div class="nz-table2">
id="model-list-table" <el-table v-show="bottomBox.mainResizeShow"
border style="width: 100%;" id="model-list-table"
ref="modelTable" ref="modelTable"
class="nz-table" v-loading="tools.loading"
v-loading="tools.loading" :cell-class-name="assetStatClassName"
:cell-class-name="assetStatClassName" :data="tableData"
v-show="bottomBox.mainResizeShow" :height="mainTableHeight"
:height="mainTableHeight" border
@sort-change="tableDataSort" @sort-change="tableDataSort"
@row-dblclick="panel" @row-dblclick="panel"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}" @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
type="selection" align="center"
width="40" type="selection"
align="center"> width="55">
</el-table-column> </el-table-column>
<el-table-column :resizable="true" <el-table-column v-for="(item, index) in tools.customTableTitle"
v-for="(item, index) in tools.customTableTitle" v-if="item.show"
v-if="item.show" :key="`col-${index}`"
:key="`col-${index}`" :label="item.label"
:label="item.label" :prop="$tableSet.propTitle(item.prop,'model')"
:sortable="$tableSet.sortableShow(item.prop,'model')" :resizable="true"
:prop="$tableSet.propTitle(item.prop,'model')" :sort-orders="['ascending', 'descending']"
:sort-orders="['ascending', 'descending']"> :sortable="$tableSet.sortableShow(item.prop,'model')">
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template> <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
<template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template> <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" > <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
<el-popover <el-popover
placement="top" :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended"
trigger="hover" placement="top"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended"> trigger="hover">
<div slot="reference" class="dc-asset-states"> <div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span> <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span> <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span> <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span> <span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
</div> </div>
</el-popover> </el-popover>
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template> </template>
<div v-else-if="item.prop == 'option'" class="content-right-options"> </el-table-column>
<span :id="'model-panel-'+scope.row.id" :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" v-has="'model_chart_view'"><i class="nz-icon nz-icon-template"></i></span> </el-table>
<span :id="'model-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'model_toEdit'"><i class="nz-icon nz-icon-edit"></i></span> </div>
<span :id="'model-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'model_delete'"><i class="nz-icon nz-icon-delete"></i></span>
</div>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column :resizable="false" width="28">
<template slot="header">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="model-list-totop"><i class="nz-icon nz-icon-top"></i></button> <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="model-list-totop"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList"> <div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
@@ -180,11 +171,6 @@ export default {
label: this.$t('config.model.assets'), label: this.$t('config.model.assets'),
prop: 'assetStat', prop: 'assetStat',
show: true show: true
}, {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 120
} }
], ],
tableData: [], tableData: [],

107
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -1,10 +1,8 @@
<style scoped> <style lang="scss">
.prom { @import '@/assets/css/common/tableCommon.scss';
height: 100%;
}
</style> </style>
<template> <template>
<div class="prom"> <div class="prom list-page">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}"> <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div> <div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow"> <div class="top-tools" v-show="bottomBox.mainResizeShow">
@@ -13,10 +11,14 @@
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input> <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
</div> </div>
<button :title="$t('overall.createPrometheusServer')" @click="add" type="button" v-has="'prom_toAdd'" <button :title="$t('overall.createPrometheusServer')" @click="add" type="button" v-has="'prom_toAdd'"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add"> id="prom-add" class="top-tool-btn margin-l-20">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
<delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="promServer" v-has="'prom_delete'" id="promserver-list-batch-delete"></delete-button> <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="promServer" v-has="'prom_delete'" id="promserver-list-batch-delete"></delete-button>
<button id="prom-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div> </div>
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
</div> </div>
@@ -31,58 +33,46 @@
ref="customTableTitle" ref="customTableTitle"
></element-set> ></element-set>
</transition> </transition>
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;" <div class="nz-table2">
@sort-change="tableDataSort" class="nz-table" ref="promTable" v-loading="tools.loading" <el-table v-show="bottomBox.mainResizeShow" ref="promTable" v-loading="tools.loading" :data="tableData"
:height="mainTableHeight" border @sort-change="tableDataSort"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}" @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
type="selection" align="center"
width="40" type="selection"
align="center"> width="55">
</el-table-column> </el-table-column>
<el-table-column :resizable="true" v-for="(item, index) in tools.customTableTitle" <el-table-column v-for="(item, index) in tools.customTableTitle" v-if="item.show"
v-if="item.show" :key="`col-${index}`"
:key="`col-${index}`" :label="item.label"
:label="item.label" :prop="$tableSet.propTitle(item.prop,'promServer')"
:sortable="$tableSet.sortableShow(item.prop,'promServer')" :resizable="true"
:prop="$tableSet.propTitle(item.prop,'promServer')" :sort-orders="['ascending', 'descending']"
:sort-orders="['ascending', 'descending']"> :sortable="$tableSet.sortableShow(item.prop,'promServer')">
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span> <span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
<span v-else-if="item.prop == 'type'"> <span v-else-if="item.prop == 'type'">
<!--{{scope.row[item.prop] == '1' ? 'Global' : ''}} <!--{{scope.row[item.prop] == '1' ? 'Global' : ''}}
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}--> {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}-->
{{findServerType(scope.row[item.prop]).text}} {{findServerType(scope.row[item.prop]).text}}
</span> </span>
<span v-else-if="item.prop == 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span> <span v-else-if="item.prop == 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else-if="item.prop == 'status'"> <span v-else-if="item.prop == 'status'">
<el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))"> <el-popover :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))" placement="right" trigger="hover" width="200">
<div slot="reference" style="width: 20px"> <div slot="reference" style="width: 20px">
<div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div> <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
</div> </div>
</el-popover> </el-popover>
</span> </span>
<div v-else-if="item.prop == 'option'" class="content-right-options"> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span> <template v-else>-</template>
&nbsp;--> </template>
<span :id="'prom-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'prom_toEdit'"><i class="nz-icon nz-icon-edit"></i></span> </el-table-column>
&nbsp; </el-table>
<span :id="'prom-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'prom_delete'"><i class="nz-icon nz-icon-delete"></i></span> </div>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column width="28" :resizable="false">
<template slot="header">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow" id="promserver-list-totop"><i class="nz-icon nz-icon-top"></i></button> <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow" id="promserver-list-totop"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList"> <div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
@@ -179,11 +169,6 @@ export default {
label: this.$t('config.promServer.checkTime'), label: this.$t('config.promServer.checkTime'),
prop: 'checkTime', prop: 'checkTime',
show: false show: false
}, {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 120
} }
], ],
tableData: [], tableData: [],

155
nezha-fronted/src/components/page/config/roles.vue
View File

@@ -1,10 +1,8 @@
<style scoped> <style lang="scss">
.roles { @import '@/assets/css/common/tableCommon.scss';
height: 100%;
}
</style> </style>
<template> <template>
<div class="roles"> <div class="roles list-page">
<!-- 主页面 --> <!-- 主页面 -->
<div class="main-list" > <div class="main-list" >
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
@@ -14,11 +12,15 @@
<div class="top-tool-search"> <div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input> <search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
</div> </div>
<button :title="$t('overall.createRole')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" v-has="'role_toAdd'" <button v-has="'role_toAdd'" :title="$t('overall.createRole')" class="top-tool-btn margin-l-20" @click="add"
id="roles-add" type="button"> id="roles-add" type="button">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
</button> </button>
<delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" @before="delFlag=true" api="sys/role" v-has="'role_delete'" id="role-list-batch-delete"></delete-button> <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" @before="delFlag=true" api="sys/role" v-has="'role_delete'" id="role-list-batch-delete"></delete-button>
<button id="account-column-setting" class="top-tool-btn margin-l-10"
type="button" @click="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
<i class="nz-icon-gear nz-icon"></i>
</button>
</div> </div>
<!-- 顶部分页组件，当打开底部上滑框时出现 --> <!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div> <div class="pagination-top pagination-top-hide display-none"></div>
@@ -33,70 +35,81 @@
v-if="tools.showCustomTableTitle" v-if="tools.showCustomTableTitle"
></element-set> ></element-set>
</transition> </transition>
<el-table <div class="nz-table2">
:data="tableData" <el-table
:height="mainTableHeight" ref="rolesTable"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}" v-loading="tools.loading"
@sort-change="tableDataSort" :data="tableData"
border :height="mainTableHeight"
class="nz-table" border
ref="rolesTable" @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
style="width: 100%;" @sort-change="tableDataSort"
v-loading="tools.loading"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="40">
</el-table-column>
<el-table-column
:fixed="item.fixed"
:key="`col-${index}`"
:label="item.label"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
> >
<template slot="header" > <el-table-column
<span v-if="item.type == 'tag'" :title="item.label" class="tag-header"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span> :resizable="false"
<span v-else><span>{{item.label}}</span></span> align="center"
</template> type="selection"
<template :column="item" slot-scope="scope"> width="55">
<div class="content-right-options" v-if="item.prop == 'option'"> </el-table-column>
<template v-if="scope.row.buildIn != 1"> <el-table-column
<span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'role_toEdit'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span> v-for="(item, index) in tools.customTableTitle"
&nbsp; v-if="item.show"
<span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'role_delete'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span> :key="`col-${index}`"
</template> :fixed="item.fixed"
<template v-else> :label="item.label"
<span :id="'roles-detail-'+scope.row.id" :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-view"></i></span> :prop="item.prop"
</template> :resizable="true"
</div> :sort-orders="['ascending', 'descending']"
<template v-if="item.prop == 'name'"> >
<template v-if="scope.row.i18n"> <template slot="header" >
<span>{{$t(scope.row.i18n)}}</span> <span v-if="item.type == 'tag'" :title="item.label" class="tag-header"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
</template> <span v-else><span>{{item.label}}</span></span>
<template v-else-if="scope.row.name">
<span>{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template> </template>
<span v-else>{{scope.row[item.prop]}}</span> <template slot-scope="scope" :column="item">
</template> <div v-if="item.prop == 'option'" class="content-right-options">
</el-table-column> <template v-if="scope.row.buildIn != 1">
<el-table-column fixed="right" width="28"> <span :id="'roles-edit-'+scope.row.id" v-has="'role_toEdit'" :title="$t('overall.edit')" class="content-right-option" @click="edit(scope.row)"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
<template slot="header" :resizable="false"> &nbsp;
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear"> <span :id="'roles-del-'+scope.row.id" v-has="'role_delete'" :title="$t('overall.delete')" class="content-right-option" @click="del(scope.row)"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
<i class="nz-icon nz-icon-gear"></i> </template>
</span> <template v-else>
</template> <span :id="'roles-detail-'+scope.row.id" :title="$t('overall.view')" class="content-right-option" @click="detail(scope.row)"><i class="nz-icon nz-icon-view"></i></span>
</el-table-column> </template>
</el-table> </div>
<template v-if="item.prop == 'name'">
<template v-if="scope.row.i18n">
<span>{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="scope.row.name">
<span>{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
fixed="right"
width="165">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['edit', scope.row]" ><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item :command="['delete', scope.row]" ><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-table-column>
</el-table>
</div>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button> <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" > <div class="pagination-bottom" >
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
@@ -161,12 +174,6 @@ export default {
label: this.$t('config.roles.description'), label: this.$t('config.roles.description'),
prop: 'remark', prop: 'remark',
show: true show: true
}, {
label: this.$t('config.roles.option'),
prop: 'option',
show: true,
width: 120,
fixed: 'right'
} }
], ],
tableData: [], tableData: [],

11
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -1,9 +1,10 @@
.overview{ .overview {
height: 100%; height: 100%;
background-color: #f6f6f6;
} }
.overview-content-header{ .overview-content-header{
display: flex; display: flex;
padding: 8px 0 2px 0; padding: 0 0 2px 0;
justify-content: space-between; justify-content: space-between;
} }
.overview-content-header .header-title{ .overview-content-header .header-title{
@@ -36,6 +37,12 @@
color: #333333; color: #333333;
vertical-align: middle; vertical-align: middle;
} }
.content-row-box .content-col-box:first-child{
margin-left: 0;
}
.content-row-box .content-col-box:last-child{
margin-right: 0;
}
.tool-container .date{ .tool-container .date{
height: 35px; height: 35px;
} }

2
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="overview" style="background-color: #f9f9f9;"> <div class="overview">
<!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪--> <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
<div class="my-pane" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}"></div> <div class="my-pane" :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}"></div>
<!--标题--> <!--标题-->

38
nezha-fronted/src/main.js
View File

@@ -1,10 +1,9 @@
// import "./assets/css/main.css"; // import '@/assets/stylus/index.scss'
import './assets/stylus/index.scss'
import './assets/css/nzIcon.css'
import './assets/css/main.css'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import 'xterm/dist/xterm.css' import 'xterm/dist/xterm.css'
import '@/assets/stylus/main.scss'
import '@/assets/css/main.scss'
import ElementUI from 'element-ui'
import i18n from './components/common/i18n' import i18n from './components/common/i18n'
import Vue from 'vue' import Vue from 'vue'
@@ -79,7 +78,7 @@ Vue.prototype.$unixTimeParseToString = unixTimeParseToString
Vue.prototype.$chartResizeTool = chartResizeTool Vue.prototype.$chartResizeTool = chartResizeTool
Vue.prototype.$tableSet = tableSet Vue.prototype.$tableSet = tableSet
Vue.prototype.$tableHeight = { // 列表页表格的高度 Vue.prototype.$tableHeight = { // 列表页表格的高度
normal: 'calc(100% - 100px)', // 常规高度，特例在下方定义 normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
openSubList: { // 打开二级列表后的高度 openSubList: { // 打开二级列表后的高度
mainList: 'calc(100% - 60px)', mainList: 'calc(100% - 60px)',
subList: 'calc(100% - 86px)', subList: 'calc(100% - 86px)',
@@ -125,36 +124,9 @@ Vue.mixin({
return bus.timeFormate(this.timezoneToUtcTime(time), format) return bus.timeFormate(this.timezoneToUtcTime(time), format)
} }
}, },
tableTitleReset: function (src, dist) {
dist.forEach(item => {
const title = src.find(t => t.prop === item.prop)
if (title && title.label) {
item.label = title.label
}
})
},
hasButton (code) { hasButton (code) {
return hasButton(this.$store.getters.buttonList, code) return hasButton(this.$store.getters.buttonList, code)
}, },
toTop (wrap) {
let currentTop = wrap.scrollTop
const interval = currentTop / 10
const intervalFunc = setInterval(function () { // 花200ms分10次回到顶部，模拟动画效果
if (currentTop === 0) {
clearInterval(intervalFunc)
} else {
currentTop = (currentTop - interval) < interval * 0.5 ? 0 : currentTop - interval
wrap.scrollTop = currentTop
}
}, 20)
},
toTopBtnHandler (wrap) {
const vm = this
wrap.addEventListener('scroll', bus.debounce(function () {
vm.tools.showTopBtn = wrap.scrollTop > 50
vm.tools.tableHover = wrap.scrollTop > 50
}, 100))
},
numberWithEConvent (num) { numberWithEConvent (num) {
if (num) { if (num) {
if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) { if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {

1
nezha-fronted/src/permission.js
View File

@@ -115,7 +115,6 @@ export function sortByOrderNum (menuList) {
menu.children = menu.children.sort((a, b) => { menu.children = menu.children.sort((a, b) => {
return a.orderNum - b.orderNum return a.orderNum - b.orderNum
}) })
menu.route = menu.children[0].route
} }
}) })
return r return r

4
nezha-fronted/src/router/index.js
View File

@@ -19,7 +19,7 @@ export default new Router({
}, },
{ {
path: '/', path: '/',
component: resolve => require(['../components/common/home.vue'], resolve), component: resolve => require(['../components/layout/home.vue'], resolve),
children: [ children: [
{ {
path: '/panel', path: '/panel',
@@ -43,7 +43,7 @@ export default new Router({
}, },
{ {
path: '/account', path: '/account',
component: resolve => require(['../components/page/config/account.vue'], resolve) component: resolve => require(['../components/page/config/account2.vue'], resolve)
}, },
{ {
path: '/menu', path: '/menu',