fear: endpoint增加asset二级页面等

1.endpoint增加asset二级页面
2.asset增加endpoint二级页面，临时页签未实现

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -23,6 +23,8 @@
       <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
       <!--告警信息-->
       <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+      <!--asset页的endpoint列表-->
+      <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
       <!--endpoint页的asset详情-->
       <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab="targetTab"
                          v-if="targetTab == 'assetDetail' && from == 'endpoint'"
@@ -39,6 +41,7 @@
   import cabinetTab from "./tabs/cabinetTab";
   import alertMessageTab from "./tabs/alertMessageTab";
   import endpointQueryTab from "./tabs/endpointQueryTab";
+  import endpointTab from "./tabs/endpointTab";
 
   export default {
     name: "cabinetBox",
@@ -47,6 +50,7 @@
       'cabinet-tab': cabinetTab,
       'alert-message-tab': alertMessageTab,
       'endpoint-query-tab': endpointQueryTab,
+      'endpoint-tab': endpointTab,
     },
     props: {
       isFullScreen: false, //是否全屏

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -7,7 +7,8 @@
           <template v-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
         </div><div
         class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("alert.message")}}</div>
+        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
+        class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search">
@@ -39,7 +40,7 @@
         <template slot-scope="scope" :column="item">
           <template v-if="item.prop == 'alertRule'">
             <div class="too-long-split" :id="'view-rule-'+scope.row[item.prop].id"
-                 v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
+                 v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName + ' ' + $t('overall.active')}}</div>
             <template v-else>-</template>
           </template>
           <div v-else-if="item.prop == 'type'" class="content-right-options">
@@ -64,7 +65,7 @@
             <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
                   @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
                   :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
-            <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
+            <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"
                   @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
                   :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
             <span v-else>-</span>

nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue

@@ -7,12 +7,15 @@
           <template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
           <template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
           <template v-else-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>
-          <template v-else-if="from == 'asset'">{{$t("asset.tableTitle.host")}}：{{obj.host}}</template>
+          <template v-else-if="from == 'asset'">{{$t("project.endpoint.asset")}}：{{obj.host}}</template>
           <template v-else-if="from == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
+  <!-- 为防止代码换行导致页面中元素之间有间隙，所以将元素的标签尾部和相邻元素的标签头部连在一起写 -->
         </div><div class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'detail'}" @click="changeTab('detail')">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
           <div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
         </template><template v-if="from == 'alertRule' || from == 'asset'">
-          <div class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("alert.message")}}</div>
+          <div class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
+        </template><template v-if="from == 'asset'">
+          <div class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
         </template><template v-if="from == 'endpoint'">
           <div class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div><div
             class="sub-list-tab" :class="{'sub-list-tab-active': targetTab == 'assetDetail'}" @click="changeTab('assetDetail')">{{$t("project.endpoint.asset")}}</div>

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -0,0 +1,339 @@
+<template>
+  <span>
+    <div class="sub-top-tools">
+      <div class="sub-list-tabs">
+        <div class="sub-list-tab-title">{{$t("project.endpoint.asset")}}：{{obj.host}}</div><div
+        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
+        class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.modules")}}</div>
+      </div>
+      <div class="top-tool-right">
+        <div class="top-tool-search">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
+        </div>
+        <!--<button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
+                class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>-->
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      v-loading="loading"
+      class="nz-table endpoint-table"
+      :height="$tableHeight.noPagination"
+      v-scrollBar:el-table
+      ref="endpointTable"
+      style="width: 100%;">
+      <el-table-column
+        :resizable="false"
+        v-for="(item, index) in tablelable"
+        v-if="item.show"
+        :width="item.width"
+        :key="`col-${index}`"
+        :label="item.label"
+        min-width="110px"
+      >
+        <template slot-scope="scope" :column="item">
+          <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="">{{scope.row[item.prop].host}}</span>
+          <span v-else-if="item.prop == 'project' && scope.row[item.prop]">{{scope.row.project.name}}</span>
+          <span v-else-if="item.prop == 'module' && scope.row[item.prop]">{{scope.row.module.name}}</span>
+          <span v-else-if="item.prop == 'param'">
+            <template v-if="scope.row.paramObj">
+              <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
+            </template>
+            <template v-else>-</template>
+          </span>
+          <div v-else-if="item.prop == 'option'" class="content-right-options">
+            <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+            &nbsp;
+            <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+            &nbsp;
+            <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+          </div>
+          <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
+          <span v-else-if="item.prop == 'state'" >
+            <el-popover placement="right" width="50" trigger="hover" :content="getStateContent(scope.row)">
+              <div slot="reference" style="width: 20px">
+                <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+              </div>
+            </el-popover>
+          </span>
+          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          <template v-else>-</template>
+        </template>
+      </el-table-column>
+      <el-table-column width="28" :resizable="false">
+        <template slot="header" slot-scope="scope">
+          <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+            <i class="nz-icon nz-icon-gear"></i>
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <button class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
+
+    <element-set
+      v-clickoutside="elementsetHide"
+      :table-title="tableTitle"
+      :dropCol="dropCol"
+      @tablelable="tablelabelEmit"
+      :path="'/assetEndpoint'"
+      ref="elementset"
+    ></element-set>
+    <edit-endpoint-box @close="closeEditEndpoint" v-if="editBoxShow" :currentProject="endpoint.project" :currentModule="endpoint.module" :endpoint="endpoint" @reload="getTableData" ref="editEndpointBox"></edit-endpoint-box>
+  </span>
+</template>
+
+<script>
+  export default {
+    name: "endpointTab",
+    components: {
+
+    },
+    props: {
+      obj: Object, //关联的实体对象
+    },
+    data() {
+      return {
+        editBoxShow: false,
+        endpoint: {}, //用来查看详情和编辑的对象
+        endpointDetail: {}, //用来查看详情的对象
+        asset: {}, //对应props的obj
+        showTopBtn: false, //top按钮是否显示
+        loading: false,
+        tableTitle: [
+          {
+            label: this.$t("project.endpoint.endpointId"),
+            prop: 'id',
+            show: true,
+          },{
+            label: this.$t("project.project.project"),
+            prop: 'project',
+            show: true,
+          },{
+            label: this.$t("project.module.module"),
+            prop: 'module',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.asset"),
+            prop: 'asset',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.host"),
+            prop: 'host',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.port"),
+            prop: 'port',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.param"),
+            prop: 'param',
+            show: true,
+          },{
+            label: this.$t("project.endpoint.path"),
+            prop: 'path',
+            show: true,
+          },{
+            label: this.$t("alert.list.state"),
+            prop: 'state',
+            show: true,
+          },
+          {
+            label: this.$t("project.endpoint.lastUpdate"),
+            prop: 'lastUpdate',
+            show: true,
+          },
+          {
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true,
+            width: 120
+          }
+        ],
+        tablelable: [],
+        dropCol: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: "ID",
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 11,
+            name: this.$t('asset.asset'),
+            type: 'asset',
+            label: 'asset',
+            disabled: false
+          }],
+        },
+        searchLabel: { //搜索参数
+        },
+        tableData: [],
+      }
+    },
+    methods: {
+      // 切换tab
+      changeTab(tab) {
+        this.$emit('changeTab', tab);
+      },
+      getTableData() {
+        this.$get('/endpoint?assetId=' + this.asset.id + 'pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+          }
+        });
+      },
+      query(endpoint) {
+
+      },
+      detail(endpoint) {
+
+      },
+      closeEditEndpoint() {
+        this.editBoxShow = false;
+      },
+      toEdit(endpoint) {
+        this.endpoint = JSON.parse(JSON.stringify(endpoint));
+        if (!this.endpoint.paramObj) {
+          this.$set(this.endpoint, 'paramObj', []);
+        }
+        this.editBoxShow = true;
+        this.$nextTick(() => {
+          this.$refs.editEndpointBox.show(true);
+          this.$refs.editEndpointBox.toEdit(true, this.endpoint.id);
+        });
+
+      },
+      search: function (searchObj) {
+        /*this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }*/
+        this.getTableData();
+      },
+      closeSubList() {
+        this.tableData = [];
+        this.$emit("closeSubList");
+      },
+      elementsetShow(s, e) {
+        var eventfixed = {
+          shezhi: 0,
+          screen: 0
+        };
+        eventfixed[s] = 1;
+        e.preventDefault();
+        this.$store.commit('setHeaderTable', this.tablelable);
+        this.$store.commit('setEventfixed', eventfixed);
+        const h = document.documentElement.clientHeight;
+        const w = document.documentElement.clientWidth;
+        const dw = this.$refs.elementset.$el.offsetWidth;
+        const dh = this.$refs.elementset.$el.offsetHeight;
+        let positionx =
+          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
+        let positiony =
+          e.clientY + dh <= h - 10
+            ? e.clientY + 20
+            : e.clientY + 20 - (e.clientY + dh - h);
+        this.$store.commit('setPosition', { positionx, positiony });
+      },
+      elementsetHide() {
+        //悬浮点击空白隐藏
+        this.$refs.elementset.elementsetHide();
+      },
+      tablelabelEmit(data) {
+        //获取子组件传过来的参数
+        this.$store.commit('setHeaderTable', data);
+        this.tablelable = data;
+      },
+      dateFormat(time) {
+        if (!time) {
+          return '-';
+        }
+        let date = new Date(time * 1000);
+        let year = date.getFullYear();
+        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+        let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+        let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+        let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+
+        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+      },
+      getStateContent:function(row){
+        if(row){
+          if(row.state == 1){
+
+            return 'up'+'['+this.formatUpdateTime(row.lastUpdate)+']';
+          }else{
+            return 'down'+'['+this.getStateErrorMsg(row)+']';
+          }
+        }
+      },
+      formatUpdateTime:function(date){
+        let time=new Date(date);
+        let hours=time.getHours()>9?time.getHours():'0'+time.getHours();
+        let minutes=time.getMinutes()>9?time.getMinutes():'0'+time.getMinutes();
+
+        return hours+':'+minutes;
+      },
+      getStateErrorMsg:function(row){
+        let errCodes=[230009,230010,230011];
+        if(row){
+          if(row.state == 0){
+            if(errCodes.find((item)=>{return row.stateInfo.code == item})){
+              return this.$t('project.endpoint.stateInfo_'+row.stateInfo.code)
+            }else{
+              return row.stateInfo.msg;
+              this.$message.error('state code error');
+            }
+          }
+        }
+      },
+    },
+    watch: {
+      obj: {
+        immediate: true,
+        deep: true,
+        handler(n) {
+          if (n) {
+            this.asset = JSON.parse(JSON.stringify(n));
+            this.getTableData();
+          }
+        }
+      }
+    },
+    mounted() {
+      this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint"))
+        : this.tableTitle;
+      this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint"))
+        : this.tableTitle;
+
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 50) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -59,6 +59,7 @@ const en = {
     importTip:'only allowed xlsx/xls file',
     upload:'upload',
     template:'Template',
+    active: 'active',
     result:{
       total:'Total',
       failed:'Failed',

nezha-fronted/src/components/common/rightBox/editEndpointBox.vue

@@ -130,7 +130,7 @@
               <div class="right-box-form-btns" v-if="rightBox.isEdit">
                 <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
                 <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span class="top-tool-btn-txt">{{$t('overall.clearAll')}}</span>
+                  <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
                 </button>
                 <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
                   <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
@@ -234,6 +234,7 @@
       esc() {
         this.rightBox.show = false;
         this.subBox.show = false;
+        this.$emit("close");
       },
 
       /*关闭子弹框*/

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

@@ -73,7 +73,7 @@
                 <span v-else>-</span>
               </template>
               <template v-else-if="item.prop == 'alertNum'">
-                <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum}}</span>
+                <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum}}<template v-if="scope.row.alertNum && scope.row.alertNum > 0">{{' ' + $t('overall.active')}}</template></span>
               </template>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               <template v-else>-</template>

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

@@ -101,26 +101,25 @@
                 </el-popover>
               </div>
               <template v-if="item.prop=='Module'">
-                <template v-if="scope.row.moduleNum > 0" >
+                <span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
+                <!--<template v-if="scope.row.moduleNum > 0" >
                   <endpoint-status-pop :asset-id="scope.row.id" :ref="'endpointPop' + scope.row.id">
                     <template v-slot:optionZone>
                     <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">
+                  <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.endpointNum}}</span>
+  &lt;!&ndash;              <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>&ndash;&gt;
+                <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>-->
-  <!--              <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.alertNum}}</button>-->
-                <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum}}</span>
+                <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum}}<template v-if="scope.row.alertNum && scope.row.alertNum > 0">{{' ' + $t('overall.active')}}</template></span>
               </template>
               <div v-if="item.prop=='dataCenter'">
   <!--              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
@@ -668,6 +667,11 @@
           return false;
         }
       },
+      showEndpoint(asset) {
+        this.alertMsgAsset = Object.assign({}, asset);
+        this.targetTab = "endpoint";
+        this.showSubList = true;
+      },
       tagShow(data, id, type) {
         if (data === 'showAdd') {
           //this.addUnitShow = true;

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

@@ -742,7 +742,7 @@
 
       dateFormat(time) {
         if (!time) {
-          return;
+          return '-';
         }
         let date = new Date(time * 1000);
         let year = date.getFullYear();