feat: endpoint二级页面增加asset详情

2020-03-30 16:39:29 +08:00
parent 6bd9e46fad
commit bd41f9414b
5 changed files with 94 additions and 19 deletions
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -15,7 +15,7 @@

      <!------TAB区------>
      <!--通用详情-->
-      <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail"
+      <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab="targetTab"
                         v-if="targetTab == 'detail'"
                         @changeTab="changeTab"
      ></common-detail-tab>
@@ -23,6 +23,11 @@
      <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>
+      <!--endpoint页的asset详情-->
+      <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab="targetTab"
+                         v-if="targetTab == 'assetDetail' && from == 'endpoint'"
+                         @changeTab="changeTab"
+      ></common-detail-tab>
      <!--endpoint-query-->
      <endpoint-query-tab v-show="subResizeShow" v-if="(from == 'endpoint' && targetTab == 'endpointQuery')" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>
    </div>
@@ -51,6 +56,8 @@
      from: String, //来自哪个页面
      targetTab: String, //展示哪个页签
      detail: Array, //对象详情内容
+
+      assetDetail: Array, //endpoint页的asset详情
    },
    data() {
      return {}
--- a/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
@@ -9,12 +9,13 @@
          <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 == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
-        </div><div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><template v-if="from == 'dc'">
+        </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>
        </template><template v-if="from == 'endpoint'">
-          <div class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
+          <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>
        </template>
      </div>
    </div>
@@ -39,7 +40,8 @@
    props: {
      obj: Object,
      from: String,
-      detail: Array
+      detail: Array,
+      targetTab: String
    },
    methods: {
      changeTab(tab) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -10,7 +10,8 @@
      <div class="sub-list-tabs">
        <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
+        class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div><div
+        class="sub-list-tab" v-if="from == 'endpoint'" @click="changeTab('assetDetail')">{{$t("project.endpoint.asset")}}</div>
      </div>
      <div class="top-tool-right">
        <div class="top-tool-search margin-r-20">
@@ -59,7 +60,7 @@
      :height="$tableHeight.noPagination"
      @selection-change="selectChange"
      ref="endpointQueryTable"
-      style="width: 100%; margin-top: 5px;">
+      style="width: 100%;">
      <el-table-column
        :resizable="false"
        type="selection"
@@ -156,6 +157,7 @@
    },
    props: {
      obj: Object, //关联的实体对象
+      from: String,
    },
    data() {
      let temp = this;
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -86,7 +86,7 @@
            min-width="110px"
          >
            <template slot-scope="scope" :column="item">
-              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
+              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row)">{{scope.row[item.prop].host}}</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>
@@ -125,7 +125,8 @@
        </div>
        <button class="to-top" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
      </div>
-      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="curEndpoint" :isFullScreen="isFullScreen" :from="'endpoint'" :targetTab="targetTab" :detail="endpointDetail"
+      <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen"
+                  :from="'endpoint'" :targetTab="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
    </div>

@@ -140,8 +141,8 @@
    <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-    <asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
-               ref="assetEditUnit"></asset-box>
+    <!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
+               ref="assetEditUnit"></asset-box>-->
  </div>
 </template>

@@ -161,6 +162,7 @@
      vm = this;
      let temp = this;
      return {
+        assetDetail: [], //asset详情
        endpointDetail: [],
        targetTab: '',
        mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -171,6 +173,7 @@
        mainListHeight: '', //主列表dom的高度
        showSubList: false,

+        userData: [],
        showTopBtn: false, //主列表top按钮
        editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
        endpointTableTitle: [
@@ -246,7 +249,7 @@
            disabled: false
          }],
        },
-        viewAssetState:false,
+        /*viewAssetState:false,*/
        curEndpoint:null,
        endpointQueryTabData:[],//endpoint 查询列表数据
        showTableData:[],
@@ -684,12 +687,12 @@
      },

      //asset弹框控制
-      tabControl(data) {
+      /*tabControl(data) {
        if (data === 'close') {
          this.viewAssetState = false
          this.$refs['assetEditUnit'].tabView = false
        }
-      },
+      },*/
      //搜索
      endpointSearch: function(searchObj) {
        this.endpointSearchLabel = {};
@@ -751,10 +754,13 @@

        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      },
-      viewAsset:function(id){
-        this.viewAssetState=true;
+      viewAsset(endpoint) {
+        this.curEndpoint = endpoint;
+        this.targetTab = 'assetDetail';
+        this.showSubList = true;
+        /*this.viewAssetState=true;
        this.$refs.assetEditUnit.getAssetData(id);
-        this.$refs.assetEditUnit.tabView=true;
+        this.$refs.assetEditUnit.tabView=true;*/
      },
      showEndpoint(endpoint) {
        this.curEndpoint = endpoint;
@@ -801,11 +807,65 @@
            }
          }
        }
+      },
+      assetConvertToDetail(obj) {
+        let detail = [];
+        detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
+        detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
+        detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
+        detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
+        detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
+        detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
+        detail.push({label: this.$t("asset.createAssetTab.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
+        detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
+        detail.push({label: this.$t("asset.createAssetTab.purchaseDate"), value: obj.purchaseDate});
+        detail.push({label: this.$t("asset.createAssetTab.dcName"), value: obj.idc ? obj.idc.name : ""});
+        detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
+        detail.push({label: this.$t("asset.createAssetTab.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
+        detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
+        detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.idc ? obj.idc.tel : ""});
+        detail.push({label: this.$t("asset.createAssetTab.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
+        detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
+        detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
+        if (obj.accounts.length > 0) {
+          let account = obj.accounts[0];
+          if (account.protocol == 'SSH') {
+            detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'SSH'});
+            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+            let loginType = "";
+            if (account.authType == 1) {
+              loginType = this.$t('asset.createAssetTab.password');
+            } else if (account.authType == 2) {
+              loginType = this.$t('asset.createAssetTab.ssh');
            }
+            detail.push({label: this.$t("asset.createAssetTab.loginType"), value: loginType});
+          } else if (account.protocol == 'TELNET') {
+            detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'TELNET'});
+            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
+          }
+          detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
+        }
+        return detail;
+      },
+      getPrincipalName(data) {
+        for (let item in this.userData) {
+          if (this.userData[item].userId === data) {
+            return this.userData[item].username
+          }
+        }
+      },
+      getUserData() {
+        this.$get('sys/user/list').then(response => {
+          if (response.code === 200) {
+            this.userData = response.data.list
+          }
+        })
+      },
    },
    created() {
      this.currentProject = this.$store.state.currentProject;
      this.getModuleList();
+      this.getUserData();
    },
    mounted() {
      //是否存在分页缓存
@@ -877,6 +937,11 @@
        deep: true,
        handler(n) {
          this.endpointDetail = this.convertToDetail(n);
+          this.$get('asset', {id: n.assetId}).then(response => {
+            if (response.code === 200) {
+              this.assetDetail = this.assetConvertToDetail(response.data.list[0]);
+            }
+          });
        }
      },
    },
--- a/nezha-fronted/src/tools.js
+++ b/nezha-fronted/src/tools.js
@@ -168,11 +168,10 @@ export const scrollBar = {
  },
 };

+// 底部上滑框窗口控制
 export const bottomBoxWindow = {
  // 鼠标拖动二级列表
  listResize(vm, e) {
-    console.info(vm);
-    console.info(e);
    let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
    let subListDom = document.querySelector(".sub-list"); //副列表
    let contentRightDom = document.querySelector(".content-right"); //右侧内容区