feat：所有表格可以排序的页面点击表头只在正序倒序切换 style：修改箭头样式 添加assetlabel的气泡内容

nezha-fronted/src/assets/stylus/main.scss

@@ -835,7 +835,7 @@ li{
   border-top-color: #ebeef5;
 }
 .el-tooltip__popper.is-light[x-placement^=right] .popper__arrow { /*覆盖tooltip小三角颜色*/
-  border-top-color: #ebeef5;
+  border-right-color: #ebeef5;
 }
 .el-table .el-table__body tr:hover>td {
   background-color: #f0f0f0;

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <span v-loading="loading">
+  <span>
-    <div class="alertLabelInfo" v-if="type==='asset'">
+    <div class="alertLabelInfo" v-if="type==='asset'" v-loading="loading">
       <div class="alertLabelBox">
         <div class="alertLabelTitle">ID</div>
         <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
@@ -9,8 +9,52 @@
         <div class="alertLabelTitle">SN</div>
         <div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
       </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Host</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.host:''}}</div>
       </div>
-  <div class="alertLabelInfo" v-if="type==='module'">
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">State</div>
+        <div class="alertLabelValue">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Ping</div>
+        <div class="alertLabelValue">
+          <div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingState == 1,'active-icon red':alertLabelData.pingState == 0}"></div>
+          <span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
+        </div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Type</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.model.type.value:''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Vendor</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.model.vendor.name:''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Model</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.model.name:''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">PurchaseDate</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.createAt:''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Alert</div>
+        <div class="alertLabelValue"><sapn v-if="alertLabelData" :class="{danger:alertLabelData.alertNum>0,success:alertLabelData.alertNum<=0}">{{alertLabelData.alertNum + alertActiveStr()}}</sapn></div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Dc</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.idc.name:''}}</div>
+      </div>
+      <div class="alertLabelBox">
+        <div class="alertLabelTitle">Endpoint</div>
+        <div class="alertLabelValue">{{alertLabelData?alertLabelData.endpointNum:''}}</div>
+      </div>
+  </div>
+
+  <div class="alertLabelInfo" v-if="type==='module'" v-loading="loading">
     <div class="alertLabelBox">
       <div class="alertLabelTitle">ID</div>
       <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
@@ -28,7 +72,8 @@
       <div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
     </div>
   </div>
-  <div class="alertLabelInfo" v-if="type==='project'">
+
+  <div class="alertLabelInfo" v-if="type==='project'" v-loading="loading">
     <div class="alertLabelBox">
       <div class="alertLabelTitle">ID</div>
       <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
@@ -54,7 +99,8 @@
         type:Array
       },
       type:{},
-      labelLoading:{}
+      labelLoading:{},
+      that:{}
     },
     watch:{
       labelLoading(){
@@ -101,9 +147,19 @@
     },
 
     methods:{
-
+      alertActiveStr(){
+        return vm.$t('overall.active');
+      },
+      alertStateStr(num){
+        if( num == 1){
+          return vm.$t('asset.inStock')
+        } else {
+          return vm.$t('asset.notInStock')
+        }
+      }
     },
     mounted(){
+      // console.log(vm.$t('overall.exportAll'));
     },
   }
 
@@ -123,7 +179,7 @@
   }
   .alertLabelTitle{
     text-align: left;
-    width: 80px;
+    width: 90px;
     border-right: 1px solid #ebeef5;
     color: #666;
     padding: 0 3px 0 13px;
@@ -134,4 +190,19 @@
     color: #1a1a1a;
     padding: 0 3px 0 13px;
   }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
 </style>

nezha-fronted/src/components/page/config/account.vue

@@ -70,6 +70,7 @@
             :key="`col-${index}`"
             :label="item.label"
             :prop="item.prop"
+            :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">

nezha-fronted/src/components/page/config/mib.vue

@@ -57,7 +57,8 @@
         <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
           <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
                            :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)">
+                           :prop="propTitle(item.prop)"
+                           :sort-orders="['ascending', 'descending']">
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
               <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >

nezha-fronted/src/components/page/config/model.vue

@@ -67,7 +67,8 @@
                            :key="`col-${index}`"
                            :label="item.label"
                            :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)">
+                           :prop="propTitle(item.prop)"
+                           :sort-orders="['ascending', 'descending']">
             <template slot-scope="scope" :column="item">
               <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>

nezha-fronted/src/components/page/config/operationlog.vue

@@ -65,6 +65,7 @@
           :label="item.label"
           :sortable="sortableShow(item.prop)"
           :prop="propTitle(item.prop)"
+          :sort-orders="['ascending', 'descending']"
         >
           <template slot-scope="scope" :column="item">
             <span v-if="item.prop == 'time'">

nezha-fronted/src/components/page/config/promServer.vue

@@ -57,7 +57,8 @@
                            :key="`col-${index}`"
                            :label="item.label"
                            :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)">
+                           :prop="propTitle(item.prop)"
+                           :sort-orders="['ascending', 'descending']">
             <template slot-scope="scope" :column="item">
               <span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
 

nezha-fronted/src/components/page/config/terminallog.vue

@@ -64,6 +64,7 @@
           :label="item.label"
           :sortable="sortableShow(item.prop)"
           :prop="propTitle(item.prop)"
+          :sort-orders="['ascending', 'descending']"
         >
           <template slot-scope="scope" :column="item">
             <span v-if="item.prop == 'lang'">

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

@@ -107,6 +107,7 @@
             min-width="110px"
             :sortable="sortableShow(item.prop)"
             :prop="propTitle(item.prop)"
+            :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item" >
               <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>