feat:新增asset endpoint 列点击悬浮窗

nezha-fronted/src/components/common/language/en.js

@@ -217,18 +217,18 @@ const en = {
         title:'New Datacenter',//'新增DC'
         dcName:'Datacenter name',//'DC名称'
         location:'Location',//'地区'
-        principal:'Principal',//'负责人'
+        principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
       editIdcTab:{
         title:'Edit Datacenter',//'编辑DC'
         dcName:'Datacenter name',//'DC名称'
         location:'Location',//'地区'
-        principal:'Principal',//'负责人'
+        principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
       location:'Location',//'地区'
-      principal:'Principal',//'负责人'
+      principal:'Administrator',//'负责人'
       tel:'Telephone',//'电话'
       cabinet: 'Cabinet',//'机柜'
       AddCabinetTab:{
@@ -284,18 +284,18 @@ const en = {
         title:'New Datacenter',//'新增DC'
         dcName:'DC name',//'DC名称'
         location:'Location',//'地区'
-        principal:'Principal',//'负责人'
+        principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
       editIdcTab:{
         title:'Edit DC',//'编辑DC'
         dcName:'DC name',//'DC名称'
         location:'Location',//'地区'
-        principal:'Principal',//'负责人'
+        principal:'Administrator',//'负责人'
         tel:'Telephone'//'电话'
       },
       location:'Location',//'地区'
-      principal:'Principal',//'负责人'
+      principal:'Administrator',//'负责人'
       tel:'Telephone',//'电话'
       cabinet: 'Cabinet',//'机柜'
       AddCabinetTab:{
@@ -337,7 +337,7 @@ const en = {
       model: 'Model',//'型号'
       manufacturer: 'Manufacturer',//'厂商'
       procurementDate: 'Purchase date',//'购买日期'
-      principal: 'Principal',//'负责人'
+      principal: 'Administrator',//'负责人'
       principalTel: 'Telephone',//'电话'
       option: 'Operation'//"操作"
     },

nezha-fronted/src/components/page/asset/asset.vue

@@ -86,7 +86,7 @@
             <div v-if="item.prop == 'pingStatus'">
               <el-popover
                 placement="right"
-                width="50"
+                width="200"
                 trigger="hover"
                 :content="formatPingTime(scope.row.pingLastUpdate)">
                 <div slot="reference" style="width: 20px">
@@ -96,15 +96,20 @@
             </div>
             <template v-if="item.prop=='Module'">
               <template v-if="scope.row.moduleNum > 0" >
-                <module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
+                <endpoint-status-pop :asset-id="scope.row.id" :ref="'endpointPop' + scope.row.id">
                   <template v-slot:optionZone>
-<!--                    <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>-->
+                  <span class="clickable">{{scope.row.endpointNum}}</span>
+                </template>
+                </endpoint-status-pop>
+                <!--<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
+                  <template v-slot:optionZone>
+&lt;!&ndash;                    <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>&ndash;&gt;
                       <span class="clickable">{{scope.row.moduleNum}}</span>
                   </template>
-                </module-list-pop>
+                </module-list-pop>-->
               </template>
 <!--              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>-->
-              <span v-else class="unclickable">{{scope.row.moduleNum}}</span>
+              <span v-else class="unclickable">{{scope.row.endpointNum}}</span>
             </template>
             <template v-if="item.prop=='Alert'">
 <!--              <button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>-->
@@ -195,9 +200,13 @@
 <script>
   import bus from "../../../libs/bus";
   import exportXLSX from "../../common/exportXLSX";
+  import endpointStatusPop from "./endpointStatusPop";
   export default {
     name: "asset",
-    components:{'export-excel':exportXLSX},
+    components:{
+      'export-excel':exportXLSX,
+      'endpoint-status-pop':endpointStatusPop
+    },
     data() {
       return {
         searchMsg: { //给搜索框子组件传递的信息
@@ -301,11 +310,11 @@
           }, {
             label: this.$t("asset.tableTitle.principal"),
             prop: 'principal',
-            show: true,
+            show: false,
           }, {
             label: this.$t("asset.tableTitle.principalTel"),
             prop: 'tel',
-            show: true,
+            show: false,
             width: 115
           }, {
             label: this.$t('config.account.option'),
@@ -712,7 +721,7 @@
       },
       formatPingTime:function(str){
         if(!str || str == ''){
-          return 'Never';
+          return 'Last reply:Never';
         }
         let ds='-';
         let ts=':';
@@ -724,7 +733,7 @@
         let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
         let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
 
-        return year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
+        return 'Last reply:'+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
 
       }
     },

nezha-fronted/src/components/page/asset/endpointStatusPop.vue

@@ -0,0 +1,248 @@
+<template>
+    <el-popover :placement="placement" width="300"  @hide="" ref="endpointPop" v-model="popBox.show" popper-class="nz-pop" @show="atShowPop">
+      <div class="pop-box-title">
+        <div class="pop-top-btns">
+          <button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
+            <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
+            <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
+          </button>
+        </div>
+        <div class="pop-title">{{popBox.title}}</div>
+      </div>
+
+      <div class="pop-body">
+        <div class="pop-body_title">{{showProject?showProject.name:''}}</div>
+        <div class="pop-body_content">
+          <el-table
+            :data="modules"
+            :show-header="false"
+            :row-key="getRowKeys"
+            :expand-row-keys="expands"
+            @expand-change="expandSelect"
+            @row-click="clickTabRow"
+            ref="popTab"
+            style="width: 100%;"
+            class="pop-box-table">
+            <el-table-column >
+              <template slot-scope="scope" :column="item">
+                <span class="link" @click="" >{{scope.row.name}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column type="expand">
+              <template slot-scope="props">
+                <div class="table-inner">
+                  <template v-for="(item,index) in filterEndpoints()">
+                    <div class="inner-row">
+                      <div class="inner-col left">ID：{{item.id}}</div>
+                      <div class="inner-col right">
+                        <el-popover placement="right"  width="50" trigger="hover" :content="(item.state == 1?'up':'down')+'['+(item.lastUpdate&&item.lastUpdate!=''?(new Date(item.lastUpdate).getHours()+':'+new Date(item.lastUpdate).getMinutes()):'--')+']'" >
+                          <div slot="reference" style="width: 20px">
+                            <div @mouseover="resetZIndex" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
+                          </div>
+                        </el-popover>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <template slot="reference">
+        <div @click.prevent="">
+          <slot name="optionZone"><div class="tab-input-square link">0</div></slot>
+        </div>
+      </template>
+    </el-popover>
+</template>
+
+<script>
+    export default {
+      name: "endpointStatusPop",
+      props:{
+        placement:{type:String,default:'left'},
+        assetId:{type:Number,required:true}
+      },
+      data(){
+        let temp=this;
+        return{
+          popBox:{title:this.$t('project.endpoint.endpoint'),show:false},
+          endpointDatas:[],
+          endpoints:[],
+          modules:[],
+          projects:new Map(),
+          showModule:null,
+          showProject:null,
+          getRowKeys(row) {
+            if(temp.showModule&&row.id==temp.showModule.id){
+              temp.$refs.popTab.toggleRowExpansion(row,true);
+            }
+            return row.id
+          },
+          expands:[],
+        }
+      },
+      created() {
+
+      },
+      methods:{
+        getEndpointDatas:function(){
+          this.$get('/endpoint?assetId='+this.assetId+'pageSize=-1').then(response => {
+            if (response.code === 200) {
+              this.endpointDatas = response.data.list;
+              this.dealDatas(JSON.parse(JSON.stringify(this.endpointDatas)));
+            }
+          });
+        },
+        dealDatas:function(endpointDatas){ //为方便组织结构，将数据分层
+          let temp=this;
+          temp.endpoints=[];
+          temp.modules=[];
+          temp.projects.clear();
+          temp.showModule=null;
+          temp.showProject=null;
+          endpointDatas.forEach((item,index)=>{
+            let module=JSON.parse(JSON.stringify(item.module));
+            module.projectId=item.project.id;
+            temp.modules.push(module);
+            let project=JSON.parse(JSON.stringify(item.project));
+            temp.projects.set(project.id,project);
+            delete item.module;
+            delete item.project;
+            temp.endpoints.push(item);
+          })
+          this.modules=this.duplicateRemoval(this.modules);
+          this.initShow();
+        },
+        duplicateRemoval:function(arr){
+          const res = new Map();
+          return arr.filter(a=>{
+            return !res.has(a.id) && res.set(a.id,1);
+          })
+        },
+        initShow:function(){
+          if(!this.showModule){
+            this.showModule=this.modules[0];
+          }
+        },
+        filterEndpoints:function(){
+          if(this.showModule){
+            return this.endpoints.filter((item)=>{
+              return item.moduleId==this.showModule.id;
+            })
+          }
+        },
+        expandSelect(row, expandedRows) {//只能展开一行
+          this.expands = []
+          if (expandedRows.length > 0) {
+            row ? this.expands.push(row.id) : '';
+            this.showModule=row;
+            this.showProject=this.projects.get(row.projectId);
+          }
+        },
+        esc:function(){
+          this.popBox.show=false;
+        },
+        resetZIndex:function(e){
+          let popId=e.target.parentElement.getAttribute('aria-describedby');
+          let pop=document.getElementById(popId);
+          setTimeout(function(){
+            pop.style.zIndex=999999;
+          },100)
+        },
+        atShowPop:function(){
+          this.getEndpointDatas();
+        },
+        clickTabRow:function(row, column, event){
+          this.$refs.popTab.toggleRowExpansion(row);
+        }
+      },
+      mounted() {
+      },
+      watch:{
+        showModule:{
+          handler(n,o){
+            if(!n){
+             n=this.modules && this.modules.length>0?this.modules[0]:null;
+            }
+            this.showProject=this.projects.get(n.projectId);
+          }
+        }
+      }
+
+    }
+</script>
+
+<style scoped>
+  .pop-box-title{
+    margin-left: 5px;
+  }
+  .pop-top-btns {
+    text-align: center;
+    float: right;
+    padding-right: 12px;
+  }
+  .pop-body{
+    margin:10px 10px 10px 10px;
+    border: 1px solid lightgrey;
+    height: 400px;
+    border-radius: inherit;
+  }
+
+  .pop-body .pop-body_title{
+    line-height: 25px;
+    display: inline;
+    vertical-align: middle;
+  }
+  .pop-body .pop-body_content{
+    border-top:1px solid lightgrey;
+    box-shadow: 0px 0px 5px lightgrey inset;
+    border-radius: inherit;
+    height: calc(100% - 25px);
+  }
+  .pop-box-table{
+    font-size: 12px;
+  }
+
+  .table-inner{
+    background-color: #f1f1f1;
+  }
+  .table-inner .inner-row{
+    display: flex;
+    line-height: 20px;
+  }
+  .table-inner .inner-row:hover {
+    background-color: white;
+  }
+  .table-inner .inner-col{
+    flex: 1;
+    display: inline-block;
+  }
+  .left{
+    flex: 8 !important;
+    padding-left: 20px;
+    text-align: left;
+  }
+  .right{
+    position: relative;
+  }
+  .active-icon{
+    margin-top:0px;
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    display: inline-block;
+    margin-right: 5px;
+  }
+</style>
+<style>
+  .el-table td,.el-table th{
+    padding: 0px;
+  }
+  .el-table__expanded-cell[class*=cell] {
+    padding: 0px;
+  }
+
+</style>
+