NEZ-1858 feat：ping & traceroute 页面样式调整（40%）
This commit is contained in:
zhangyu
@@ -3,9 +3,9 @@
|
|||||||
// align-items: center;
|
// align-items: center;
|
||||||
}
|
}
|
||||||
.ipInput{
|
.ipInput{
|
||||||
width:250px;
|
width:280px;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
max-height: 62px;
|
max-height: 128px;
|
||||||
}
|
}
|
||||||
.ti-tag-input{
|
.ti-tag-input{
|
||||||
background: transparent ;
|
background: transparent ;
|
||||||
@@ -13,7 +13,8 @@
|
|||||||
.vue-tags-input,.ti-new-tag-input {
|
.vue-tags-input,.ti-new-tag-input {
|
||||||
.ti-input {
|
.ti-input {
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
max-height: 62px;
|
//max-height: 62px;
|
||||||
|
height: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -26,6 +27,7 @@
|
|||||||
color: $--color-text-regular !important;
|
color: $--color-text-regular !important;
|
||||||
}
|
}
|
||||||
.ti-tags{
|
.ti-tags{
|
||||||
|
height: 24px;
|
||||||
.ti-tag{
|
.ti-tag{
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
@@ -164,3 +166,225 @@
|
|||||||
max-height: 144px;
|
max-height: 144px;
|
||||||
overflow-y: auto;
|
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);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,62 +3,72 @@
|
|||||||
ref="dataList"
|
ref="dataList"
|
||||||
:layout="[]"
|
:layout="[]"
|
||||||
:from="fromRoute.ping"
|
:from="fromRoute.ping"
|
||||||
|
class="radar-box"
|
||||||
>
|
>
|
||||||
<template v-slot:top-tool-left>
|
<template v-slot:top-tool-left>
|
||||||
<vue-tags-input
|
<div class="tools-header">
|
||||||
class="ipInput"
|
<div class="tools-header-left">
|
||||||
v-model="ip"
|
<span>Ip</span>
|
||||||
:placeholder="$t('overall.placeHolder')+' IP'"
|
<vue-tags-input
|
||||||
:add-from-paste="false"
|
class="ipInput"
|
||||||
:tags="tags"
|
style="height: 190px"
|
||||||
@tags-changed="newTags => tags = newTags"
|
v-model="ip"
|
||||||
@before-adding-tag="value => beforeAddTag(value)"
|
:placeholder="$t('overall.placeHolder')+' IP'"
|
||||||
@adding-duplicate="value => addDuplicate(value)"
|
:add-from-paste="false"
|
||||||
/>
|
:tags="tags"
|
||||||
<el-popover
|
@tags-changed="newTags => tags = newTags"
|
||||||
placement="bottom"
|
@before-adding-tag="value => beforeAddTag(value)"
|
||||||
width="220"
|
@adding-duplicate="value => addDuplicate(value)"
|
||||||
trigger="manual"
|
/>
|
||||||
v-model="visible"
|
</div>
|
||||||
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>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="timeout" style="margin-bottom:10px">
|
|
||||||
<div class="pop-tit">{{$t('ping.timeout')}}</div>
|
|
||||||
<div class="wrap" style="height:32px">
|
|
||||||
<el-input v-model.number="ruleForm.timeout" placeholder="" >
|
|
||||||
<template slot="append">{{$t('config.system.basic.second')}}</template>
|
|
||||||
</el-input>
|
|
||||||
</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>
|
|
||||||
</el-button>
|
|
||||||
</el-popover>
|
|
||||||
|
|
||||||
<el-button class="top-tool-btn btn" v-if="!isStart" @click="startTask">
|
<div class="tools-header-center">
|
||||||
<i class="el-icon-caret-right"></i>
|
<el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
|
||||||
</el-button>
|
<el-form-item style="margin-bottom:10px" :label="$t('ping.dcs')">
|
||||||
<el-button class="top-tool-btn btn" v-else @click="clearTask">
|
<el-select v-model="checked" multiple @change="checkedChange" >
|
||||||
<i class="quadrate"></i>
|
<el-option
|
||||||
</el-button>
|
: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" :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>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</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-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>
|
||||||
|
|
||||||
<template v-slot:default>
|
<template v-slot:default>
|
||||||
@@ -81,11 +91,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 存在任务id时展示表格 -->
|
<!-- 存在任务id时展示表格 -->
|
||||||
<div class="data-wrap" v-show="tid!==undefined">
|
<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">
|
<div class="data-bottom">
|
||||||
<ping-table
|
<ping-table
|
||||||
ref="dataTable"
|
ref="dataTable"
|
||||||
@@ -132,8 +137,10 @@ export default {
|
|||||||
isIndeterminate: false,
|
isIndeterminate: false,
|
||||||
// 数据中心
|
// 数据中心
|
||||||
dataCenter: [],
|
dataCenter: [],
|
||||||
// 复选框选中的值
|
// 实际选中的值
|
||||||
checked: [],
|
checked: [],
|
||||||
|
// 复选框选中的值
|
||||||
|
oldChecked: [-1],
|
||||||
// 是否正在请求数据
|
// 是否正在请求数据
|
||||||
isStart: false,
|
isStart: false,
|
||||||
// 定时器id
|
// 定时器id
|
||||||
|
|||||||
Reference in New Issue
Block a user