temp: 临时提交回家做；修复了些bug，下次说明

2020-06-17 19:52:03 +08:00
parent 4586d11310
commit 8c439ece91
10 changed files with 164 additions and 65 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -705,7 +705,6 @@ export default {
        }else{
          chart=Object.assign({},this.chartInfo)
        }
-        console.info(chart)
        if(chart && chart.param){ //按照粒度，project>module>endpoint  查询只传最细粒度
          let param=chart.param;
          if(param.endpointId&&param.endpointId != ''){
@@ -730,7 +729,6 @@ export default {
            queryParam.state=param.state;
          }
        }
-        console.info(queryParam)
        this.startLoading(filterType);
        this.$get('/alert/message', queryParam).then(response => {
          if (response.code == 200) {
--- a/nezha-fronted/src/components/charts/chart-detail.vue
+++ b/nezha-fronted/src/components/charts/chart-detail.vue
@@ -35,7 +35,7 @@
                  <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{assetKey[key]}}</span>
+                      <span class="content-text">{{assetKey[key]}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
                    </div>

@@ -46,13 +46,16 @@
                        <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
                        <span>{{value ? value + 'ms' : ''}}</span>
                      </template>
-                      <span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <template v-else-if="assetKey[key]">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </template>
                    </div>
                  </div>
                  <!-- endpoint-detail、asset、model的assetInfo的feature-->
                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{key}}</span>
+                      <span class="content-text">{{key}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
                    </div>

@@ -83,14 +86,17 @@
                          </el-table-column>
                        </el-table>
                      </template>
-                      <span v-else-if="key">{{value ? value : "&nbsp;"}}</span>
+                      <template v-else-if="key">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </template>
                    </div>
                  </div>

                  <!-- project的projectInfo的project详情-->
                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{projectKey[key]}}</span>
+                      <span class="content-text">{{projectKey[key]}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
                    </div>
                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
@@ -102,13 +108,16 @@
                        <div class="active-icon orange"></div>
                        <span>{{value[2]}}</span>
                      </template>
-                      <span v-else-if="projectKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <template v-else-if="projectKey[key]">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </template>
                    </div>
                  </div>
                  <!-- project的projectInfo的module详情-->
                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{moduleKey[key]}}</span>
+                      <span class="content-text">{{moduleKey[key]}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
                    </div>
                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
@@ -126,40 +135,48 @@
                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
                        <span>{{value[1]}}</span>&nbsp;&nbsp;
                      </template>
-                      <span v-else-if="moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <template v-else-if="moduleKey[key]">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </template>
                    </div>
                  </div>

                  <!-- endpoint-detail的endpointInfo的endpoint详情-->
                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{endpointKey[key]}}</span>
+                      <span class="content-text">{{endpointKey[key]}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
                    </div>
                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                      <template v-if="key == 'state'"><span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span></template>
-                      <span v-else-if="endpointKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <template v-else-if="endpointKey[key]">
+                        <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
+                      </template>
                    </div>
                  </div>
                  <!-- endpoint-detail的endpointInfo的alert详情-->
                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{key}}</span>
+                      <span class="content-text">{{key}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
                    </div>
                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <span>{{value ? value : "&nbsp;"}}</span>
+                      <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
                    </div>
                  </div>

                  <!-- alertRule-detail的详情-->
                  <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                      <span>{{key}}</span>
+                      <span class="content-text">{{key}}</span>
                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
                    </div>
                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
-                      <span>{{value ? value : "&nbsp;"}}</span>
+                      <span class="content-text">{{value ? value : "&nbsp;"}}</span>
+                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
                    </div>
                  </div>
                </template>
@@ -202,6 +219,15 @@
        default: 0,
      }
    },
+    watch: {
+      data: {
+        deep: true,
+        immediate: true,
+        handler(n) {
+          console.info(n)
+        }
+      }
+    },
    data() {
      return {
        ready: false,
@@ -273,25 +299,26 @@
        },
      };
    },
-    methods: {
-      itemTip(type, content, index, ready) {
-        let className = "";
-        this.$nextTick(() => {
-          if (ready) {
-            let cellDom = document.querySelector(`#${type}-${index}`);
-            let spanDom = document.createElement("span");
-            spanDom.style.display = "inline-block";
-            spanDom.innerText = content;
-            cellDom.appendChild(spanDom);
-            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
-              className = "item-tip-show";
+    computed: {
+      itemTip() {
+        return function(type, content, index, ready) {
+          let className = "item-tip-show";
+          this.$nextTick(() => {
+            if (ready) {
+              let cellDom = document.querySelector(`#${type}-${index}`);
+              let spanDom = document.querySelector(`#${type}-${index} .content-text`);
+              if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+                document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className);
+              } else {
+                document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className);
+              }
            }
-            cellDom.removeChild(spanDom);
-            return className;
-          }
-        });
-        return className;
+          });
+          return "";
+        }
      },
+    },
+    methods: {
      startResize(e) {
        let vm = this;
        this.$chartResizeTool.start(vm, this.data, e);
@@ -368,7 +395,6 @@
      // 设置数据, filter区分
      setData(chartItem, detail, panelId, filter, area, errorMsg) {
        //this.resize(chartItem);
-        console.info(chartItem, detail)
        if(errorMsg && errorMsg !== ''){
          this.isError = true;
          this.errorContent = errorMsg;
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -494,6 +494,7 @@
        }
      },
      // 获取panel详情数据,获取panel下所有chart列表
+
      getData(params) {
        const param = {
          panelId: params.panelId,
@@ -526,6 +527,7 @@
            type: "line",
            prev: -10,
            next: -1,
+            unit: 1,
            buildIn: 1,
            elements: [{
              id: '',
@@ -533,6 +535,8 @@
              type: ''
            }]
          });
+          this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-24*60*60*1000, "yyyy-MM-dd hh:mm:ss"));
+          this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
          this.$nextTick(() => {
            this.dataList.forEach((item,index) => {
              this.$set(item, "from", params.from);
@@ -741,6 +745,10 @@
        const chartItem = chartInfo;
        const index = pos; // 指标
        if(chartItem.type === 'assetInfo'){
+          if (chartItem.from != 'endpoint') {
+            this.$set(chartItem, "draggable", true);
+            this.$set(chartItem, "resizable", true);
+          }
          this.getAssetInfoChartData(chartItem);
          return;
        }
@@ -1225,7 +1233,6 @@
          });
        });
        alertMsg.then(result => {
-          console.info(detail);
          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
        }, err => {

--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -229,7 +229,7 @@
        if(chartType==='table'){
          this.tableShow = false;
          chartContainerId = 'chartTablePreview';
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
          this.isGreyScreen=[];
          this.showLegend = false;
          chartContainerId = 'chartEchartPreview';
@@ -422,11 +422,14 @@
                            },
                            metric_name: '',
                          };
-                          if (chartItem.type === 'stackArea' || chartItem.type === "endpointInfo") {
+                          if (chartItem.type === 'stackArea') {
                            seriesItem.theData.type = 'line';
                            seriesItem.theData.stack = chartItem.title;
                            seriesItem.theData.areaStyle = {"opacity": 0.3};
                          }
+                          if (chartItem.type === "endpointInfo") {
+                            seriesItem.theData.type = 'line';
+                          }
                          // 图表中每条线的名字,后半部分
                          let host = '';//up,
                          if (queryItem.metric.__name__) {
@@ -475,7 +478,6 @@
                              return [dpsItem[0] * 1000, dpsItem[1]];
                            });
                            series.push(seriesItem.theData);
-                            console.info(seriesItem.theData)

                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
                            // 无数据提示
@@ -506,7 +508,7 @@
                //if(this.$refs.editChart&&this.$refs.editChart[index]) {
                  if (chartItem.type === 'table') {//表格
                      this.setTableData(tableData);
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == "endpointInfo") {
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.from == "endpoint") {
                    if (series.length && chartItem.type === 4) {//曲线汇总
                    }
                    if(series.length<1){
@@ -515,7 +517,7 @@
                      this.noData=false;
                    }
                    let _chartItem = JSON.parse(JSON.stringify(chartItem));
-                    if (chartItem.type == "endpointInfo") {
+                    if (chartItem.from == "endpoint") {
                      _chartItem.type = "line";
                    }
                    this.setData(_chartItem, series, legend);
@@ -745,7 +747,12 @@
                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
                str += `<div style="padding-left: 10px;">`;
-                str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                str += function(){
+                  if (chartInfo.from == 'endpoint') {
+                    return val == 1 ? "up" : "down";
+                  }
+                  return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                }();
                str += `</div>`;
                str += `</div>`;

@@ -878,6 +885,7 @@
          },
          yAxis: {
            type: 'value',
+            minInterval: 1,
            splitLine:{
              show:true
            },
@@ -891,6 +899,13 @@
            //去掉y轴--end
            axisLabel: {
              formatter: function(value,index){
+                if (self.chart.from == 'endpoint') {
+                  if (value == 1) {
+                    return "up";
+                  } else {
+                    return "down";
+                  }
+                }
                let chartUnit=chartInfo.unit;
                chartUnit=chartUnit?chartUnit:2;
                let unit=chartDataFormat.getUnit(chartUnit);
@@ -902,7 +917,6 @@
          useUTC: false,//使用本地时间
          series: dataArg
        };
-
        if(this.echartModalStore){
          this.echartModalStore.clear();
        }
@@ -912,12 +926,12 @@
        if(legend){
          this.screenLegendList = [];
          legend.forEach((item, i) => {
-            const legend = {
+            let _legend = {
              name:item.name,
              alias:item.alias,
              showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
            };
-            this.screenLegendList.push(legend);
+            this.screenLegendList.push(_legend);
            this.isGreyScreen.push(false);
          });
        }
@@ -1080,9 +1094,11 @@
          this.tableShow = false;
          this.$refs.loadingPreview.startLoading();
          this.getChartData();
-        } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+        } else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || this.chart.from == 'endpoint') {
          this.echartModalStore.clear();
-          this.showLegend = false;
+          if (this.chart.from != 'endpoint') {
+            this.showLegend = false;
+          }
          this.$refs.loadingPreview.startLoading();
          this.getQueryChart();
        }else if (chartType === 'singleStat') {
@@ -1111,7 +1127,7 @@
            return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
          });
          // 一个图表
-          axios.all(axiosArr).then((res) => {
+          axios.all(axiosArr).then(res => {
            if (res.length > 0) {
              const series = [];
              const legend = [];
@@ -1121,7 +1137,7 @@
                visible: true,
                threshold: null,
              };
-              if(!this.chart.type){
+              if(!this.chart.type || this.chart.from == 'endpoint'){
                this.chart.type='line';
              }
              res.forEach((response,pos) => {
@@ -1211,7 +1227,7 @@
              this.setColor(legend.length);
              this.initChart(this.chart,series, this.$refs.screenShowArea,legend);
            }
-          }).catch((error) => {
+          }).catch(error => {
            if (error) {
              this.$message.error(error.toString());
            }
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -655,6 +655,7 @@
            axisLine:{
              show:false
            },
+            minInterval: 1,
            axisTick: {
              show: false,
            },
@@ -1082,6 +1083,7 @@
          }
          let step = bus.getStep(startTime,endTime);
          if (type === 'list') { // 普通模式,主控台使用
+            console.info(this.data);
            axiosArr = this.data.elements.map((ele) => {
              const filterItem = ele;
              let query = encodeURIComponent(filterItem.expression);
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -15,10 +15,10 @@

      <!------TAB区------>
      <!--通用详情-->
-      <common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
+      <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail" :targetTab.sync="targetTab"
                         v-if="targetTab == 'detail'"
                         @changeTab="changeTab"
-      ></common-detail-tab>
+      ></common-detail-tab>-->
      <!--机柜-->
      <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
      <!--告警信息-->
@@ -26,17 +26,17 @@
      <!--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.sync="targetTab"
+      <!--<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="assetDetail" :targetTab.sync="targetTab"
                         v-if="targetTab == 'assetDetail' && from == 'endpoint'"
-                         @changeTab="changeTab"></common-detail-tab>
+                         @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" ref="endpointQuery"></endpoint-query-tab>

      <!--alertMessage页的详情-->
-      <template v-if="from == 'alertMessage'">
+      <!--<template v-if="from == 'alertMessage'">
        <common-detail-tab v-show="subResizeShow" :from="from" :targetTab.sync="targetTab" v-for="(item, index) in tabList" :key="index" :detail="detailList[index]"
                           v-if="targetTab == item" @changeTab="changeTab"></common-detail-tab>
-      </template>
+      </template>-->

      <!-- model-panel/asset-detail/project-overview的panel-->
      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
@@ -75,7 +75,7 @@
      detail: Object, //对象详情内容
      detailList: Array, //多个对象详情内容

-      assetDetail: Array, //endpoint页的asset详情
+      assetDetail: Object, //endpoint页的asset详情
    },
    data() {
      return {}
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
@@ -19,7 +19,7 @@
          class="margin-l-20"
        >
          <template slot="optionZone">
-            <button @click.stop="toAdd" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
+            <button @click.stop="toAdd" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
              <i class="nz-icon nz-icon-create-square"></i>
            </button>
          </template>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -649,6 +649,9 @@

 </style>
 <style lang="scss">
+  .nz-dashboard-dropdown {
+    z-index: 3001 !important;
+  }
  .panel .top-tools input {
    background-color: $content-right-background-color;
  }
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -262,7 +262,7 @@
      return {
        loading: false,
        /*二级页面相关*/
-        assetDetail: [], //asset详情
+        assetDetail: {}, //asset详情
        alertMsgAsset: {}, //告警信息对应的asset对象
        showElementSet: false, //控制自定义列的弹框
        inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
@@ -896,8 +896,32 @@
        this.getAssetData();
      },
      convertToDetail(obj) {
-        let detail = [];
-        detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
+        let detail = JSON.parse(JSON.stringify(obj));
+        detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
+        detail.assetType = obj.model.type.value;
+        detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
+        detail.dataCenter = obj.idc ? obj.idc.name : "";
+        detail.location = obj.idc ? obj.idc.location : "";
+        detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : "";
+        detail.tel = obj.idc ? obj.idc.tel : "";
+        detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
+        detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
+        detail.remark = obj.idc ? obj.idc.remark : "";
+        if (obj.accounts.length > 0) {
+          let account = obj.accounts[0];
+          detail.protocol = account.protocol;
+          detail.account = 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.loginType = loginType;
+          detail.port = account.port;
+        }
+
+        /*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});
@@ -929,7 +953,7 @@
            detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
          }
          detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
-        }
+        }*/
        return detail;
      },
      formatPingTime:function(str){
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -196,7 +196,7 @@
      return {
        loading: false,

-        assetDetail: [], //asset详情
+        assetDetail: {}, //asset详情
        endpointDetail: [],
        targetTab: '',
        mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -693,8 +693,31 @@
        }
      },
      assetConvertToDetail(obj) {
-        let detail = [];
-        detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
+        let detail = JSON.parse(JSON.stringify(obj));
+        detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
+        detail.assetType = obj.model.type.value;
+        detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
+        detail.dataCenter = obj.idc ? obj.idc.name : "";
+        detail.location = obj.idc ? obj.idc.location : "";
+        detail.principal = obj.idc ? this.getPrincipalName(obj.idc.principal) : "";
+        detail.tel = obj.idc ? obj.idc.tel : "";
+        detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
+        detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
+        detail.remark = obj.idc ? obj.idc.remark : "";
+        if (obj.accounts.length > 0) {
+          let account = obj.accounts[0];
+          detail.protocol = account.protocol;
+          detail.account = 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.loginType = loginType;
+          detail.port = account.port;
+        }
+        /*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});
@@ -728,7 +751,7 @@
            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) {