temp: 临时提交代码，晚上在家办公用

nezha-fronted/src/components/charts/chart-detail.vue

@@ -22,7 +22,7 @@
           </el-popover>
           <span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
         </div>
-        <div ref="chartInfo" class="mt-10 chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
+        <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
           <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
             <div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;">
               <div class="chart-sub-title" @click="hideElement(index)">
@@ -30,21 +30,116 @@
                 <span>{{item.title}}</span>
               </div>
               <div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
-                <div class="content-item" v-for="(value, key, i) in item.data">
+                <template v-for="(value, key, i) in item.data">
-                  <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+
-                    <span>{{key}}</span>
+                  <!-- endpoint-detail、asset的assetInfo的asset详情-->
-                    <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
+                  <div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset') && data.type == 'assetInfo' && assetKey[key]">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <span>{{assetKey[key]}}</span>
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
+                    </div>
+
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
+                      <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
+                      <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
+                      <template v-else-if="key == 'pingRtt'">
+                        <div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
+                        <span>{{value ? value + 'ms' : ''}}</span>
+                      </template>
+                      <template v-else-if="Array.isArray(value) && value.length>0">
+                        <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
+                        <el-table
+                          v-else
+                          class="nz-table asset-info-table"
+                          :data="value"
+                          tooltip-effect="light"
+                          height="100%"
+                          ref="dataTable"
+                          v-scrollBar:el-table="'small'"
+                        >
+                          <el-table-column
+                            :resizable="false"
+                            v-for="(_item, _index) in setLabels(value)"
+                            v-if="_item.show"
+                            :key="`col-${_index}`"
+                            :label="_item.label"
+                          >
+                            <template slot-scope="scope" :column="_item">
+                              <template >
+                                <span v-html="scope.row[_item.prop]"></span>
+                              </template>
+                            </template>
+                          </el-table-column>
+                        </el-table>
+                      </template>
+                      <span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
                   </div>
-                  <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+
-                    <template v-if="data.type == 'endpointInfo' && key == $t('alert.list.state')">
+                  <!-- project的projectInfo的project详情-->
-                      <span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
+                  <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
-                    </template>
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
-                    <template v-else>
+                      <template v-if="item.type == 'project'">
-                      <span>{{value}}</span>
+                        <span>{{projectKey[key]}}</span>
-                      <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, value, i, ready)">{{value}}</div>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
-                    </template>
+                      </template>
+                      <template v-if="item.type == 'module'">
+                        <span>{{moduleKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
+                      </template>
+                    </div>
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                      <template v-if="key == 'alertStat'">
+                        <div class="active-icon dark-red"></div>
+                        <span>{{value[0]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon red"></div>
+                        <span>{{value[1]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon orange"></div>
+                        <span>{{value[2]}}</span>
+                      </template>
+                      <template v-else-if="key == 'endpointStat'">
+                        <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
+                        <span>{{value[0]}}</span>&nbsp;&nbsp;
+                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
+                        <span>{{value[1]}}</span>&nbsp;&nbsp;
+                      </template>
+                      <span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
                   </div>
-                </div>
+
+                  <!-- endpoint-detail的endpointInfo的endpoint详情-->
+                  <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && projectKey[key]">
+                    <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
+                      <template v-if="item.type == 'project'">
+                        <span>{{projectKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
+                      </template>
+                      <template v-if="item.type == 'module'">
+                        <span>{{moduleKey[key]}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
+                      </template>
+                    </div>
+                    <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
+                      <template v-if="key == 'alertStat'">
+                        <div class="active-icon dark-red"></div>
+                        <span>{{value[0]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon red"></div>
+                        <span>{{value[1]}}</span>&nbsp;&nbsp;
+                        <div class="active-icon orange"></div>
+                        <span>{{value[2]}}</span>
+                      </template>
+                      <template v-else-if="key == 'endpointStat'">
+                        <img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
+                        <span>{{value[0]}}</span>&nbsp;&nbsp;
+                        <img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
+                        <span>{{value[1]}}</span>&nbsp;&nbsp;
+                      </template>
+                      <span v-else-if="item.type == 'project' && projectKey[key]">{{value ? value : "&nbsp;"}}</span>
+                      <span v-else-if="item.type == 'module' && moduleKey[key]">{{value ? value : "&nbsp;"}}</span>
+                    </div>
+                  </div>
+                </template>
               </div>
             </div>
           </el-scrollbar>
@@ -108,6 +203,51 @@
         divFirstShow:false,
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
+
+        assetKey: {
+          host: this.$t("asset.tableTitle.host"),
+          id: "Id",
+          assetType: this.$t("asset.tableTitle.assetType"),
+          sn: this.$t("asset.tableTitle.device"),
+          state: this.$t("asset.tableTitle.assetState"),
+          pingRtt: this.$t('asset.tableTitle.assetPing'),
+          dataCenter: this.$t("asset.tableTitle.dataCenter"),
+          cabinet: this.$t("asset.tableTitle.cabinet"),
+          model: this.$t("asset.tableTitle.model"),
+          vendor: this.$t("asset.tableTitle.vendor"),
+          purchaseDate: this.$t("asset.tableTitle.procurementDate"),
+          principal: this.$t("asset.tableTitle.principal"),
+          tel: this.$t("asset.tableTitle.principalTel"),
+          pingStatus: this.$t('asset.tableTitle.assetPing'),
+          pingLastReply: this.$t('asset.tableTitle.lastReply'),
+          endpoint: this.$t("asset.tableTitle.modules"),
+          alert: this.$t("asset.tableTitle.alerts")
+        },
+        projectKey: {
+          id: "ID",
+          name: this.$t("overall.name"),
+          remark: this.$t("overall.remark"),
+          alertStat: this.$t("project.chart.alertStat"),
+        },
+        moduleKey: {
+          id: "ID",
+          name: this.$t("overall.name"),
+          type: this.$t("overall.type"),
+          remark: this.$t("overall.remark"),
+          endpointStat: this.$t("project.chart.endpointStat"),
+          alertStat: this.$t("project.chart.alertStat"),
+        },
+        endpointKey: {
+          id: "ID",
+          host: this.$t("project.endpoint.host"),
+          port: this.$t("project.endpoint.port"),
+          path: this.$t("project.endpoint.path"),
+          param: this.$t("project.endpoint.param"),
+          port: this.$t("project.endpoint.port"),
+          state: this.$t("alert.list.state"),
+          project: this.$t("project.project.project"),
+          module: this.$t("project.module.module")
+        },
       };
     },
     methods: {
@@ -133,6 +273,27 @@
         let vm = this;
         this.$chartResizeTool.start(vm, this.data, e);
       },
+      setLabels:function(source){
+        let labels=[];
+        source.forEach(item=>{
+          labels=labels.concat(Object.keys(item))
+        })
+        labels=Array.from(new Set(labels));
+
+        labels=labels.map(item=>{
+          return{
+            label:this.replaceSplit(item),
+            prop:item,
+            show:true,
+          }
+        });
+        return labels;
+      },
+      replaceSplit(key){
+        if(key) {
+          return key.replace(/\$_\$/g,' ')
+        }
+      },
       hideElement(index) {
         if (this.show.indexOf(index) > -1) {
           this.show.splice(this.show.indexOf(index), 1);

nezha-fronted/src/components/charts/chart-list.vue

@@ -562,7 +562,7 @@
             id: -9,
             panelId: 0,
             title: this.$t("alert.config.chart.alertNumTrend"),
-            span: 4,
+            span: 8,
             height: 350,
             type: "line",
             prev: -10,
@@ -576,6 +576,7 @@
           });
           this.$nextTick(() => {
             this.dataList.forEach((item,index) => {
+              this.$set(item, "from", params.from);
               this.setChartSize(item, index);//设置该图表宽度
               let chartBox = document.getElementById('chart-' + item.id);
               this.handleElementInViewport(chartBox, 0, item, index);
@@ -631,6 +632,7 @@
           });
           this.$nextTick(() => {
             this.dataList.forEach((item,index) => {
+              this.$set(item, "from", params.from);
               this.setChartSize(item, index);//设置该图表宽度
               let chartBox = document.getElementById('chart-' + item.id);
               this.handleElementInViewport(chartBox, 0, item, index);
@@ -671,6 +673,7 @@
               if (this.dataList.length > 0 ) {
                 this.dataList.forEach((item,index) => {
                   this.setChartSize(item, index);//设置该图表宽度
+                  this.$set(item, "from", params.from);
                   if (param.from == "asset") {
                     if (item.type == "assetInfo") {
                       this.$set(item, "draggable", true);
@@ -1229,6 +1232,7 @@
       getEndpointInfoChartData(chartInfo) {
         let vm = this;
         let detail = [];
+        this.$refs['editChart'+chartInfo.id][0].showLoad();
         chartInfo.title = this.$t("project.chart.endpointInfo");
         detail.push({title: this.$t("project.chart.basicTitle"), data: function() {
           let data = {};
@@ -1293,39 +1297,33 @@
             this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
           });
         }else {
-          let data={
+          detail.push({
-            Basic:{
+            title: vm.$t('asset.createAssetTab.basicTitle'),
-              sn:'assetInfo Test',
+            data: {
-              host:'192.168.40.42',
+              sn: 'assetInfo Test',
-              host1:'192.168.40.42',
+              host: '192.168.40.42',
-              host2:'192.168.40.42',
+              pingStatus: 1,
-              host3:'192.168.40.42',
+              pingRtt: 80,
-              host4:'192.168.40.42',
+              cpuNum: '8',
-              host5:'192.168.40.42',
+              memery: '12GB',
-              host6:'192.168.40.42',
+              memery$_$free: '3GB'
-              host7:'192.168.40.42',
+            }
-              host8:'192.168.40.42',
+          });
-              host9:'192.168.40.42',
+          detail.push({
-              host10:'192.168.40.42',
+            title: vm.$t('asset.createAssetTab.featureTitle'),
-              pingStatus:1,
+            data: {
-              pingRtt:80,
+              CPU: "Intel E500",
-              cpuNum:'8',
+              Memory: "256GB",
-              memery:'12GB',
+              NetworkInterface: ["eth0", "eth1"],
-              memery$_$free:'3GB'
+              Disk: [{
-            },
+                mount: "/",
-            Feature:{
+                total: "256GB",
-              CPU:"Intel E500",
+                free: "128GB",
-              Memory:"256GB",
+                usageRate: "50%"
-              NetworkInterface:["eth0","eth1"],
-              Disk:[{
-                mount:"/",
-                total:"256GB",
-                free:"128GB",
-                usageRate:"50%"
               }]
             }
-          }
+          });
-          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail, this.filter.panelId, this.filter);
         }
       },
       getProjectInfoChartData(chartInfo){
@@ -1338,13 +1336,15 @@
               response.data && function() {
                 response.data.basic && detail.push({
                   title: vm.$t('project.chart.basicTitle'),
-                  data: response.data.basic
+                  data: response.data.basic,
+                  type: "project"
                 });
                 response.data.module && function() {
                   response.data.module.forEach(d => {
                     detail.push({
                       title: `${vm.$t('project.module.module')}：${d.name}`,
-                      data: d
+                      data: d,
+                      type: "module"
                     });
                   });
                 }();
@@ -1408,16 +1408,17 @@
           this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
             if (response.code == 200) {
               response.data && function () {
-                for (let type in response.data) {
+                if (response.data.project && response.data.project.length > 0) {
-                  if (type == "project" && response.data.project.length > 0) {
+                  detail.push({title: vm.$t("project.project.project"), data: convert(response.data.project)});
-                    detail.push({title: vm.$t("project.project.project"), data: convert(response.data.project)});
+                }
-                  } else if (type == "module" && response.data.module.length > 0) {
+                if (response.data.module && response.data.module.length > 0) {
-                    detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
+                  detail.push({title: vm.$t("project.module.module"), data: convert(response.data.module)});
-                  } else if (type == "asset" && response.data.asset.length > 0) {
+                }
-                    detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
+                if (response.data.endpoint && response.data.endpoint.length > 0) {
-                  } else if (type == "endpoint" && response.data.endpoint.length > 0) {
+                  detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
-                    detail.push({title: vm.$t("project.endpoint.endpoint"), data: convert(response.data.endpoint)});
+                }
-                  }
+                if (response.data.asset && response.data.asset.length > 0) {
+                  detail.push({title: vm.$t("asset.asset"), data: convert(response.data.asset)});
                 }
               }();
               resolve(true);

nezha-fronted/src/components/charts/chart.scss

@@ -171,6 +171,18 @@
   .pagination {
     padding-top: 0;
   }
+  .success {
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .danger {
+    background-color: #d64f40;
+    color: white;
+    padding:2px 5px;
+    border-radius: 4px;
+  }
   .chart-table, .chart-alert-info {
     width: 100%;
     .table-container {