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

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

@@ -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;
         }
@@ -103,7 +105,7 @@
       }
       .nz-icon-edit{
         font-size: 26px;
-      } 
+      }
       .el-icon-more{
         font-size: 22px;
       }
@@ -163,4 +165,226 @@
 .pop-list{
   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);
+
+    }
+
+  }
+}

nezha-fronted/src/components/page/tool/ping.vue

@@ -3,62 +3,72 @@
       ref="dataList"
       :layout="[]"
       :from="fromRoute.ping"
+      class="radar-box"
     >
     <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 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