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

NEZ-1858 feat：ping & traceroute 页面样式调整（40%）

Browse Source
This commit is contained in:
zhangyu
2022-05-18 10:29:43 +08:00
parent deda02e297
commit 29924c4835
2 changed files with 295 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
nezha-fronted/src/assets/css/components/page/tool/ping.scss
View File

@@ -3,9 +3,9 @@
// align-items: center;
}
.ipInput{
width:250px;
width:280px;
min-height: 36px;
max-height: 62px;
max-height: 128px;
}
.ti-tag-input{
background: transparent ;
@@ -13,7 +13,8 @@
.vue-tags-input,.ti-new-tag-input {
.ti-input {
min-height: 36px;
max-height: 62px;
//max-height: 62px;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
border-radius: 2px;
@@ -26,6 +27,7 @@
color: $--color-text-regular !important;
}
.ti-tags{
height: 24px;
.ti-tag{
word-break: break-all;
}
@@ -164,3 +166,225 @@
max-height: 144px;
overflow-y: auto;
}
.radar-box{
.top-tools {
width: 100%;
.top-tool-left{
width: 100%;
}
}
.tools-header {
width: 100%;
height: 154px;
display: flex;
margin-top: 50px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
border-radius: 2px;
.tools-header-title{
top: -50px;
left: 0px;
position: absolute;
display: block;
margin-right: 5px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
text-align: right;
line-height: 30px;
font-weight: 400;
}
.tools-header-left {
width: 360px;
display: flex;
> span{
display: block;
margin-right: 5px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
text-align: right;
line-height: 30px;
font-weight: 400;
}
}
.tools-header-center {
width: 360px;
display: flex;
.el-select__tags{
height: 24px;
overflow-y: auto;
}
}
.tools-header-right {
flex: 1;
display: flex;
justify-content: center;
.tools-header-right-title{
color: #FA901C;
}
.right-content-text {
font-size: 14px;
line-height: 22px;
font-weight: 600;
letter-spacing: 0;
margin-bottom: 10px;
}
.tools-header-right-content{
margin-left: 30px;
}
}
}
// 雷达
.radar {
/*margin-left: 50px;*/
width: 92px;
height: 92px;
position: relative;
/* 元素居中定位 */
border-radius: 50%;
border: 3px solid #FA901C;
overflow: hidden;
div {
opacity: 0.7;
}
.first-circle {
width: 61px;
height: 61px;
position: absolute;
left: 50%;
top: 50%;
/* 元素居中定位 */
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid #FA901C;
overflow: hidden;
}
.second-circle{
width: 29px;
height: 29px;
position: absolute;
left: 50%;
top: 50%;
/* 元素居中定位 */
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid #FA901C;
overflow: hidden;
background: rgba(250,144,28, 0.2);
}
.radar-line:before{
content: ' ';
width: 100%;
height: 0;
border-top: 1px solid #FA901C;
position: absolute;
left: 50%;
top: 50%;
/* 元素居中定位 */
transform: translate(-50%, -50%) rotate(45deg);
}
.radar-line:after{
content: ' ';
width: 100%;
height: 0;
border-top: 1px solid #FA901C;
position: absolute;
left: 50%;
top: 50%;
/* 元素居中定位 */
transform: translate(-50%, -50%) rotate(-45deg);
}
}
// 扫描块
.sector {
display: block;
animation: radar-beam 5s infinite;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
/* 速度相同 */
animation-timing-function: linear;
opacity: 1;
animation-play-state:paused;
}
.sector.active{
animation-play-state:running;
}
.sector:before{
content: ' ';
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
transform: rotate(0deg) skewY(-22deg);
background: #FA901C;
opacity: 0.3;
}
.sector:after{
content: ' ';
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
transform: rotate(18deg) skewY(-58deg);
background: #FA901C;
opacity: 0.9;
}
@keyframes radar-beam {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}

87
nezha-fronted/src/components/page/tool/ping.vue
View File

@@ -3,10 +3,15 @@
ref="dataList"
:layout="[]"
:from="fromRoute.ping"
class="radar-box"
>
<template v-slot:top-tool-left>
<div class="tools-header">
<div class="tools-header-left">
<span>Ip</span>
<vue-tags-input
class="ipInput"
style="height: 190px"
v-model="ip"
:placeholder="$t('overall.placeHolder')+' IP'"
:add-from-paste="false"
@@ -15,32 +20,21 @@
@before-adding-tag="value => beforeAddTag(value)"
@adding-duplicate="value => addDuplicate(value)"
/>
<el-popover
placement="bottom"
width="220"
trigger="manual"
v-model="visible"
v-clickoutside="close"
popper-class="no-style-class"
>
<el-form size="small" ref="ruleForm" label-position="top" :model="ruleForm" :rules="formRules">
<el-form-item style="margin-bottom:0px">
<p class="pop-tit">{{$t('ping.dcs')}}</p>
<ul class="pop-list-wrap">
<li class="el-dropdown-menu__item">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
</li>
<ul class="pop-list">
<el-checkbox-group v-model="checked" @change="checkedChange">
<li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
<el-checkbox :label="item.id">{{item.name}}</el-checkbox>
</li>
</el-checkbox-group>
</ul>
</ul>
</div>
<div class="tools-header-center">
<el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
<el-form-item style="margin-bottom:10px" :label="$t('ping.dcs')">
<el-select v-model="checked" multiple @change="checkedChange" >
<el-option
:key="item.id"
v-for="item in dataCenter"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="timeout" style="margin-bottom:10px">
<div class="pop-tit">{{$t('ping.timeout')}}</div>
<el-form-item prop="timeout" style="margin-bottom:10px" :label="$t('ping.timeout')">
<div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.timeout" placeholder="" >
<template slot="append">{{$t('config.system.basic.second')}}</template>
@@ -48,17 +42,33 @@
</div>
</el-form-item>
</el-form>
<el-button slot="reference" class="top-tool-btn margin-l-10 choose" @click="triggerVisible">
<i class="el-icon-more"></i>
</div>
<div class="tools-header-right">
<div class="radar">
<div class="first-circle"></div>
<div class="second-circle"></div>
<div class="third-circle"></div>
<div class="sector" :class="isStart?'active':''"></div>
<div class="radar-line"></div>
</div>
<div class="tools-header-right-content">
<div class="tools-header-right-title right-content-text">Statistics</div>
<div class="right-content-text">
IP
<span class="margin-l-5">{{$t('asset.total')}}:<span class="margin-l-10 margin-r-30">{{total}}</span></span>
<span>{{$t('ping.done')}}:<span class="margin-l-10 margin-r-30">{{done}}</span></span>
<span>{{$t('ping.progress')}}:<span class="margin-l-10 margin-r-30">{{process}}%</span></span>
</div>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="!isStart" @click="startTask">
Ping
</el-button>
</el-popover>
<el-button class="top-tool-btn btn" v-if="!isStart" @click="startTask">
<i class="el-icon-caret-right"></i>
</el-button>
<el-button class="top-tool-btn btn" v-else @click="clearTask">
<i class="quadrate"></i>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-else @click="clearTask">
Stop
</el-button>
</div>
</div>
<div class="tools-header-title">Configuration</div>
</div>
</template>
<template v-slot:default>
@@ -81,11 +91,6 @@
</div>
<!-- 存在任务id时展示表格 -->
<div class="data-wrap" v-show="tid!==undefined">
<div class="data-top">
<span>{{$t('asset.total')}}:{{total}}</span>
<span>{{$t('ping.done')}}:{{done}}</span>
<span>{{$t('ping.progress')}}:{{process}}%</span>
</div>
<div class="data-bottom">
<ping-table
ref="dataTable"
@@ -132,8 +137,10 @@ export default {
isIndeterminate: false,
// 数据中心
dataCenter: [],
// 复选框选中的值
// 实际选中的值
checked: [],
// 复选框选中的值
oldChecked: [-1],
// 是否正在请求数据
isStart: false,
// 定时器id