Merge branch 'codeCheck' of git.mesalab.cn:nezha/nezha-fronted into codeCheck

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

@@ -1376,14 +1376,14 @@ li{
   margin-left: 10px;
 }
 /* start--param*/
-.param-box {
+.param-box, .tag-edit-box {
   border: 1px solid #DCDFE6;
   border-radius: 4px;
 }
 .param-box-endpoint {
   height: 325px;
 }
-.param-box-module {
+.param-box-module, .tag-edit-box {
   height: 140px;
 }
 .param-box-row {
@@ -2042,3 +2042,35 @@ li{
   font-family: NotoSans !important;
   font-size: 12px !important;
 }
+
+.tag-edit-box {
+  .tag-edit-box-head {
+    display: flex;
+    box-sizing: border-box;
+    >div {
+      font-size: 13px;
+      color: #0275b8;
+    }
+    >div:not(:last-of-type) {
+      width: calc(50% - 25px);
+      padding: 0 10px;
+    }
+    >div:last-of-type {
+      width: 50px;
+    }
+  }
+  .tag-edit-box-body {
+    display: flex;
+    box-sizing: border-box;
+    .tag-edit {
+      padding: 0 10px;
+    }
+    >div:not(:last-of-type) {
+      width: calc(50% - 25px);
+      padding: 0 10px;
+    }
+    >div:last-of-type {
+      width: 50px;
+    }
+  }
+}

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

@@ -42,6 +42,19 @@
                     <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
                       <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>
+                      <div v-if="key == 'tags'" class="no-overflow">
+                        <template v-if="value && value.length > 0">
+                          <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px; vertical-align: middle;"
+                                        :cursor-point="false"
+                                        :key="tagItem.id"
+                                        v-for="(tagItem, tagIndex) in value">
+                            <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
+                              <span class="content-text">{{tagItem.value}}</span>
+                            </div>
+                          </nz-alert-tag>
+                        </template>
+                        <template v-else>&nbsp;</template>
+                      </div>
                       <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>
@@ -149,7 +162,7 @@
                       <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>
+                      <template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
                       <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>
@@ -196,13 +209,16 @@
   import loading from "../common/loading";
   import timePicker from '../common/timePicker';
   import chartPreview from './chartPreview';
+  import echarts from 'echarts';
+  import nzAlertTag from '../page/alert/nzAlertTag';
 
   export default {
     name: 'chartDetail',
     components: {
       'loading': loading,
       'time-picker': timePicker,
-      'chart-preview': chartPreview
+      'chart-preview': chartPreview,
+      'nz-alert-tag': nzAlertTag
     },
     props: {
       // 看板id
@@ -261,7 +277,8 @@
           pingStatus: this.$t('asset.tableTitle.assetPing'),
           pingLastReply: this.$t('asset.tableTitle.lastReply'),
           endpoint: this.$t("asset.tableTitle.modules"),
-          alert: this.$t("asset.tableTitle.alerts")
+          alert: this.$t("asset.tableTitle.alerts"),
+          tags: this.$t("overall.tag")
         },
         projectKey: {
           id: "ID",
@@ -385,7 +402,6 @@
 
       // 设置数据, filter区分
       setData(chartItem, detail, panelId, filter, area, errorMsg) {
-        //this.resize(chartItem);
         if(errorMsg && errorMsg !== ''){
           this.isError = true;
           this.errorContent = errorMsg;
@@ -400,11 +416,48 @@
         this.panelIdInner = panelId;
         this.data = chartItem;
         this.detail = detail;
+        if (this.detail[0] && this.detail[0].type && this.detail[0].type == "endpointInfo") { //endpointInfo的小图表
+          this.$nextTick(() => {
+            this.initChart(this.detail[0].data.stateSeries);
+          });
+        }
         this.$nextTick(() => {
           this.$refs.scrollbar.update();
         });
         this.endLoading();
       },
+      initChart(series) {
+        let option = {
+          title: {show: false},
+          tooltip: {show: false},
+          grid: {left: 40},
+          legend: {show: false},
+          xAxis: {
+            show: false,
+            type: 'time'
+          },
+          yAxis: {
+            type: 'value',
+            minInterval: 1,
+            splitLine: {show: false},
+            axisLabel: {
+              formatter: function (value, index) {
+                if (value == 1) {
+                  return "up";
+                } else {
+                  return "down";
+                }
+              }
+            },
+            axisTick: {show: false},
+            axisLine: {show: false}
+          },
+          useUTC: false,//使用本地时间
+          series: series
+        };
+        let chart = echarts.init(document.querySelector("#littleChart"));
+        chart.setOption(option);//创建图表
+      }
     },
     mounted() {
       this.firstLoad = false;

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

@@ -1133,14 +1133,6 @@
             // 将秒改为毫秒
             //alert('table=='+JSON.stringify(queryItem))
             seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-              /*曲线汇总暂不需要
-            if (sumData.data[dpsIndex]) {
-              const sumNum = sumData.data[dpsIndex][1] || 0;
-              sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-            } else {
-              sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-            }
-            */
               let t_date = new Date(dpsItem[0] * 1000);
               let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
               tableData.push({//表格数据
@@ -1203,11 +1195,12 @@
         let detail = [];
         this.$refs['editChart'+chartInfo.id][0].showLoad();
         chartInfo.title = this.$t("project.chart.endpointInfo");
+
         let basicInfo = JSON.parse(JSON.stringify(this.detail));
         let basicInfoReq = new Promise((resolve, reject) => {
           let now = new Date();
-          let startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let startTime = bus.timeFormate(new Date(now).setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
-          let endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
           let step = bus.getStep(startTime, endTime);
           this.$nextTick(() => {
             let query = chartInfo.elements[0].expression;
@@ -1233,192 +1226,16 @@
                       return [dpsItem[0] * 1000, dpsItem[1]];
                     });
                   });
+                  basicInfo.stateSeries = [series];
+                  basicInfo.state = "";
+                  detail.push({title: this.$t("project.chart.basicTitle"), data: basicInfo, type: "endpointInfo"});
+                  resolve(true);
                 }
               }
             });
-            // 一个图表的所有element单独获取数据
-            /*axios.all(axiosArr).then((res) => {
-              if (res.length > 0) {
-                const series = [];
-                let singleStatRlt = '';
-                const legend = [];
-                const tableData = [];
-                const sumData = {
-                  name: 'sum',
-                  data: [],
-                  visible: true,
-                  threshold: null,
-                };
-                res.forEach((response, innerPos) => {
-                  if (response.status === 'success') {
-                    this.isError = false;
-                    this.errorContent = "";
-                    if (response.data.result) {
-                      if(chartItem.type==='singleStat'){
-                        if(response.data.result.length===1){
-                          let statistics = chartItem.param.statistics;
-                          if(response.data.result[0].values){
-                            singleStatRlt  = bus.getSingleStatRlt(statistics,response.data.result[0].values);
-                            this.noData=false
-                          }else{
-                            this.noData=true;
-                          }
-                        }else if(response.data.result.length > 1){
-                          this.noData=true;
-                          singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
-                        }
-                      }else {
-                        // 循环处理每个elements下获取的数据列
-                        response.data.result.forEach((queryItem, resInnerPos) => {
-                          const seriesItem = {
-                            theData: {
-                              name: '',
-                              symbol: 'emptyCircle',  //去掉点
-                              symbolSize: [2, 2],
-                              smooth: 0.2,  //曲线变平滑
-                              showSymbol: false,
-                              data: [],
-                              type: chartItem.type,
-                              lineStyle: {
-                                width: 1,
-                                opacity: 0.9
-                              },
-                            },
-                            metric_name: '',
-                          };
-                          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__) {
-                            host = `${queryItem.metric.__name__}{`;//up,
-                          }
-                          const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
-                          // 设置时间-数据格式对
-                          const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                          // 判断是否有数据, && tagsArr.length > 0
-                          if (dpsArr.length > 0) {
-                            tagsArr.forEach((tag, i) => {
-                              if (tag !== '__name__') {
-                                host += `${tag}="${queryItem.metric[tag]}",`;
-                              }
-                            });
-                            if (host.endsWith(',')) {
-                              host = host.substr(0, host.length - 1);
-                            }
-                            if (queryItem.metric.__name__) {
-                              host += "}";
-                            }
-                            if (!host || host === '') {
-                              host = chartItem.elements[innerPos].expression;
-                            }
-                            //处理legend别名
-                            let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend);
-                            if (!alias || alias === '') {
-                              alias = host;
-                            }
-                            legend.push({name: host + resInnerPos, alias: alias});
-                            // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-                            seriesItem.theData.name = host + resInnerPos;
-                            seriesItem.metric_name = seriesItem.theData.name;
-                            // 将秒改为毫秒
-                            //alert('table=='+JSON.stringify(queryItem))
-                            seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                              let t_date = new Date(dpsItem[0] * 1000);
-                              let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
-                              tableData.push({//表格数据
-                                // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                                // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
-                                element: {element: host, alias: alias},
-                                time: timeTmp,//采集时间
-                                value: dpsItem[1],//数值
-                              });
-                              return [dpsItem[0] * 1000, dpsItem[1]];
-                            });
-                            series.push(seriesItem.theData);
-
-                          } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                            // 无数据提示
-                            /!*
-                            const currentInfo = chartItem.elements[innerPos];
-                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                            this.$message.warning({
-                              duration: 15,
-                              content: errorMsg,
-                              closable: true,
-                            });
-                            *!/
-                          }
-                        });
-                      }
-                    }
-                  }else{
-                    this.isError = true;
-                    if(response.msg){
-                      this.errorContent = response.msg;
-                    }else if(response.error){
-                      this.errorContent = response.error;
-                    }else {
-                      this.errorContent = response;
-                    }
-                  }
-                });
-                //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.from == "endpoint") {
-                  if (series.length && chartItem.type === 4) {//曲线汇总
-                  }
-                  if(series.length<1){
-                    this.noData=true;
-                  }else{
-                    this.noData=false;
-                  }
-                  let _chartItem = JSON.parse(JSON.stringify(chartItem));
-                  if (chartItem.from == "endpoint") {
-                    _chartItem.type = "line";
-                  }
-                  this.setData(_chartItem, series, legend);
-                }else if(chartItem.type ==='singleStat'){
-                  if(Number(singleStatRlt)){
-                    let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
-                    this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
-                  }else {
-                    this.serieSingleStat =singleStatRlt;
-                  }
-                  this.$refs.loadingPreview.endLoading();
-                }
-                //}
-              } else {
-                const type = chartItem.type;
-                //if(this.$refs.editChart[index]) {
-                if (type === 'table') {
-                  this.setTableData([]);
-                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
-                  this.setData(chartItem, []);
-                }else if(chartItem.type ==='singleStat'){
-                  this.serieSingleStat = "";
-                  this.$refs.loadingPreview.endLoading();
-                }
-                //}
-              }
-            }).catch((error) => {
-              if (error) {
-                this.$message.error(error.toString());
-                console.error(error)
-              }
-            });*/
           });
         });
 
-
-        detail.push({title: this.$t("project.chart.basicTitle"), data: this.detail});
         let endpointId = this.additionalInfo.id;
         let alertMsg = new Promise((resolve, reject) => {
           this.$get('/alert/message?endpointId=' + endpointId).then(response => {
@@ -1445,10 +1262,8 @@
             }
           });
         });
-        alertMsg.then(result => {
+        Promise.all([basicInfoReq, alertMsg]).then(resolves => {
           this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
-        }, err => {
-
         });
       },
       getAssetInfoChartData(chartInfo){

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

@@ -289,7 +289,7 @@
         border-bottom: 1px solid rgb(235, 238, 245);
         display: flex;
         position: relative;
-        .item-tip {
+        .item-tip> {
           .item-tip-hide {
             display: none;
             position: absolute;
@@ -324,9 +324,17 @@
             transform: translate(-50%, 10px);
           }
         }
-        .item-tip:hover .item-tip-show {
+        .item-tip:hover>.item-tip-show {
           display: block;
         }
+        .tag-value:hover .item-tip-show {
+          display: block;
+        }
+        .tag-value {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
         .content-item-key {
           color: #666;
           width: 35%;
@@ -335,6 +343,10 @@
           overflow: hidden;
           white-space: nowrap;
         }
+        .content-item-key .no-overflow, .content-item-value .no-overflow {
+          text-overflow: unset;
+          white-space: normal;
+        }
         .content-item-value {
           .item-value-sub {
             padding: 0 3px 0 13px;

nezha-fronted/src/components/charts/chartPreview.vue

@@ -850,7 +850,7 @@
             // boundaryGap: false,//line-false; bar-true;
             //data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
             axisLabel: {
-              intervale: 0,
+              interval: 0,
               rotate: 0,
               formatter: function (value) {
                 value = bus.computeTimezone(value);

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

@@ -126,6 +126,36 @@
             </div>
             <span v-if="tabView">{{assetData.purchaseDate}}</span>
           </el-form-item>
+          <!--tag-->
+          <el-form-item>
+            <template slot="label">
+              <span>{{$t('overall.tag')}}</span>
+              <div class="right-box-form-btns">
+                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+                <button id="module-add-param" type="button" @click="addTag" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+                </button>
+              </div>
+            </template>
+            <div class="tag-edit-box">
+              <div class="tag-edit-box-head">
+                <div>Tag</div>
+                <div>Value</div>
+                <div>Action</div>
+              </div>
+              <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
+                <div class="tag-edit-box-body" v-for="(item, index) in assetData.tags">
+                  <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.tag'">
+                    <el-input placeholder="tag" size="mini" v-model="item.tag"></el-input>
+                  </el-form-item>
+                  <el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
+                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                  </el-form-item>
+                  <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
+                </div>
+              </el-scrollbar>
+            </div>
+          </el-form-item>
           <!------------------------------------------impi---------------------------------------------->
           <!--<div v-if="assetType == 1">
             <div class="right-box-sub-title">{{$t('asset.createAssetTab.impi.title')}}</div>
@@ -145,77 +175,6 @@
           <el-form-item :label="$t('asset.createAssetTab.location')" prop="locationInfo" :rules="[{validator:locationValidator,trigger:'blur'}]">
             <location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader" :idc-option="IDCOptionData"></location-cascader>
           </el-form-item>
-          <!--<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
-            <template v-if="!tabView">
-&lt;!&ndash;              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">&ndash;&gt;
-              <el-select popper-class="asset-dropdown" size="small" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
-                <el-option
-                  :id="'asset-edit-idc-op-'+item.id"
-                  v-for="item in IDCOptionData"
-                  :key="item.key"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  <span class="asset-dropdown-label-txt">{{ item.name }}</span>
-                </el-option>
-              </el-select>
-&lt;!&ndash;              <div class="right-box-row-btn ">&ndash;&gt;
-&lt;!&ndash;                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>&ndash;&gt;
-&lt;!&ndash;              </div>&ndash;&gt;
-            </template>
-            <span v-if="tabView">{{assetViewData.idcName}}</span>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.location')">
-            <span>{{idcSelectedData.location}}</span>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.principal')">
-            <span>{{this.getPrincipalName(idcSelectedData.principal)}}</span>
-          </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.tel')">
-            <span>{{idcSelectedData.tel}}</span>
-          </el-form-item>
-          <el-divider></el-divider>
-
-          &lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;cabinet&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;
-          <el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
-            <template v-if="!tabView">
-&lt;!&ndash;              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"&ndash;&gt;
-              <el-select clearable v-model="assetData.cabinetId" clearable  popper-class="asset-dropdown"
-                         :disabled="assetData.idcId==''?true:false" size="small" placeholder=""
-                         @change="getSingleCabinetData">
-                <el-option
-                  :id="'asset-edit-cabinet-op-'+item.id"
-                  v-for="item in cabinetOptionData"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                  <span class="asset-dropdown-label-txt">{{ item.name }}</span>
-&lt;!&ndash;                  <div class="asset-dropdown-label-icons">&ndash;&gt;
-&lt;!&ndash;                    <span class="asset-dropdown-btn asset-dropdown-btn-delete"&ndash;&gt;
-&lt;!&ndash;                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">&ndash;&gt;
-&lt;!&ndash;                      <i class="el-icon-delete"></i>&ndash;&gt;
-&lt;!&ndash;                    </span>&ndash;&gt;
-&lt;!&ndash;                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">&ndash;&gt;
-&lt;!&ndash;                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>&ndash;&gt;
-&lt;!&ndash;                    </cabinet-config-box>&ndash;&gt;
-&lt;!&ndash;                  </div>&ndash;&gt;
-                </el-option>
-              </el-select>
-
-&lt;!&ndash;              <div class="right-box-row-btn ">&ndash;&gt;
-&lt;!&ndash;                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>&ndash;&gt;
-&lt;!&ndash;              </div>&ndash;&gt;
-            </template>
-            <span v-if="tabView">{{assetViewData.cabinetName}}</span>
-          </el-form-item>
-
-          <el-form-item :label="$t('asset.editAssetTab.uSize')">
-            <span>{{cabinetSelectedData.uSize}}</span>
-          </el-form-item>
-          <el-form-item :label="$t('asset.editAssetTab.remark')">
-            <span>{{cabinetSelectedData.remark}}</span>
-          </el-form-item>-->
           <!--cli-->
           <div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
             <el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
@@ -229,7 +188,9 @@
             <el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
               <el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
             </el-form-item>
-            <div class="line-100 right-box-line" style="margin-top: -16px;"></div>
+          </template>
+          <template v-else>
+            <div style="height: 52px;"></div>
           </template>
         </el-form>
       </el-scrollbar>
@@ -291,6 +252,7 @@
             passwordTip:'',
             reloginPasswordTip:''
           }],
+          tags: [],
           exporter: 0
         },
         modelSize:1,
@@ -546,6 +508,18 @@
           this.getAssetTypeOptionData();
         }
       },
+      addTag() {
+        this.assetData.tags.push({tag: "", value: ""});
+        this.$nextTick(() => {
+          this.$refs.tagEditBoxScrollbar.update();
+        });
+      },
+      removeTag: function(index) {
+        this.assetData.tags.splice(index, 1);
+        this.$nextTick(() => {
+          this.$refs.tagEditBoxScrollbar.update();
+        });
+      },
       clickOutSide(data) {
         if (data) {
           this.editQuit();
@@ -593,10 +567,9 @@
         },100)
       },
       modelChange:function(ids){
-        let modelId=ids[1];
         let model=this.allModelUlData.find((item,index)=>{
-          return modelId==item.id;
+          return ids==item.id;
-        })
+        });
         this.modelSize=model.usize;
       },
       getAssetData(data) {
@@ -625,7 +598,8 @@
             this.assetData.sn = this.obj.sn
             this.assetData.host = this.obj.host
             this.assetData.state = this.obj.state
-            this.assetData.idcId = this.obj.idc.id
+            this.assetData.idcId = this.obj.idc.id;
+            this.assetData.tags = this.obj.tags;
             this.assetData.cabinetId = this.obj.cabinet == null ? '' : this.obj.cabinet.id
             this.assetData.purchaseDate = this.obj.purchaseDate;
             // this.assetData.accounts[0].id = this.obj.accounts[0].id
@@ -828,7 +802,8 @@
             userTip:"",
             passwordTip:'',
             reloginPasswordTip:''
-          }]
+          }],
+          tags: []
         };
         this.assetType = '';
         this.idcSelectedData = {
@@ -855,9 +830,6 @@
         };
 
         if (data === 'asset') {
-          /*if (this.assetData.modelId) {
-            this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1];
-          }*/
           if(this.locationInfo){
             if(this.locationInfo.idc){
               this.assetData.idcId=this.locationInfo.idc.id;
@@ -871,32 +843,9 @@
             }
           }
 
-          // let modelId = this.assetData.modelId.join(',').split(',')[1];
-          // let form = new FormData();
-          // form.append("id", this.pageObj.id);
-          // form.append("sn", this.assetData.sn);
-          // form.append("host", this.assetData.host);
-          // form.append("state", this.assetData.state);
-          // form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
-          // form.append("idcId", this.assetData.idcId);
-          // form.append("cabinetId", this.assetData.cabinetId);
-          // form.append("modelId", modelId);
           if (!this.accountSwitch) {
             this.assetData.accounts = [];
           }
-          // for(let i in this.assetData.accounts){
-          //   let account=this.assetData.accounts[i];
-          //   if(account.user){
-          //     if (account.id) {
-          //       form.append("accounts["+i+"].id", account.id);
-          //     }
-          //     form.append("accounts["+i+"].authType",account.authType);
-          //     form.append("accounts["+i+"].user", account.user);
-          //     form.append("accounts["+i+"].port", account.port);
-          //     form.append("accounts["+i+"].pwd", account.pwd);
-          //     form.append("accounts["+i+"].privateKey", account.privateKey);
-          //   }
-          // }
 
           if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
             this.$refs.accountConfigBox[0].validateAccount();
@@ -907,18 +856,16 @@
               if (this.pageObj.id) {
                 this.assetData.id=this.pageObj.id;
                 let reqData = JSON.parse(JSON.stringify(this.assetData));
-                // if (reqData.modelId) {
+                if (typeof reqData.modelId == "object") {
-                //   reqData.modelId = reqData.modelId.join(',').split(',')[1];
+                  reqData.modelId = reqData.modelId[1];
-                // }
+                }
                 this.$put('asset', reqData).then(res => {
-                  const h = this.$createElement;
                   if (res.code === 200) {
                     this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
                     this.pageObj.id = '';
                     this.$emit('refreshData', 'true');
                     this.sendStateData('close');
                   } else {
-                    //this.assetData.modelId = tempModelId;
                     this.$message.error(res.msg);
                   }
                 });
@@ -926,53 +873,17 @@
                 if(this.$refs.accountConfigBox&&this.$refs.accountConfigBox.length>0){
                   this.$refs.accountConfigBox[0].validateAccount();
                 }
-                let modelId = ''
-                // let authType = ''
-                // if (this.assetData.modelId !== '') {
-                //   modelId = this.assetData.modelId.join(',').split(',')[1]
-                // } else {
-                //   this.assetData.modelId = ''
-                // }
-                // if (this.assetData.accounts[0].user === '') {
-                //   authType = ''
-                // } else {
-                //   authType = this.assetData.accounts[0].authType
-                // }
-                // let form = new FormData();
-                // form.append("sn", this.assetData.sn);
-                // form.append("host", this.assetData.host);
-                // form.append("state", this.assetData.state);
-                // form.append("purchaseDate", !this.assetData.purchaseDate?'':this.assetData.purchaseDate);
-                // form.append("idcId", this.assetData.idcId);
-                // form.append("cabinetId", this.assetData.cabinetId);
-                // form.append("modelId", modelId);
-                // if(this.accountSwitch){
-                //   for(let i in this.assetData.accounts){
-                //     let account=this.assetData.accounts[i];
-                //     if(account.user){
-                //       form.append("accounts["+i+"].authType",account.authType);
-                //       form.append("accounts["+i+"].user", account.user);
-                //       form.append("accounts["+i+"].port", account.port);
-                //       form.append("accounts["+i+"].pwd", account.pwd);
-                //       form.append("accounts["+i+"].privateKey", account.privateKey)
-                //     }
-                //   }
-                // }
-                // form.append("exporter",parseInt(this.assetData.exporter));
                 this.$post('asset', this.assetData).then(res => {
-                  const h = this.$createElement;
                   if (res.code === 200) {
                     this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
                     this.$emit('refreshData', 'true');
                     this.sendStateData('close');
                   } else {
-                    // this.assetData.modelId = tempModelId;
                     this.$message.error(res.msg);
                   }
                 });
               }
             } else {
-              // this.assetData.modelId = tempModelId;
               return false;
             }
           });

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

@@ -1,19 +1,7 @@
 <template>
-    <div>
+    <div style="height: 280px;">
       <el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
-          <!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-show="isEdit">
+        <div class="nz-tab">
-            <button type="button" @click="changeLoginType(1)" id="account-logintype-1"
-                    class="nz-btn nz-btn-size-small float-left"
-                    :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
-              <span>{{$t('asset.createAssetTab.password')}}</span>
-            </button>
-            <button type="button" @click="changeLoginType(2)" id="account-logintype-2"
-                    class="nz-btn nz-btn-size-small float-left"
-                    :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 2, 'nz-btn-style-light' : account.authType == 1}">
-              <span>{{$t('asset.createAssetTab.ssh')}}</span>
-            </button>
-          </div>-->
-        <div class="nz-tab" v-show="isEdit">
           <div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
             <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH','unclickable':!isAllowedChangeProtocol&&account.protocol == 'TELNET'}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
           </div>
@@ -21,15 +9,8 @@
             <div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET','unclickable':!isAllowedChangeProtocol&&account.protocol == 'SSH'}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
           </div>
         </div>
-        <el-form-item :label="$t('asset.createAssetTab.protocol')" size="mini" v-show="!isEdit">
-          <div class="right-box-form-content-txt" >{{account.protocol=='SSH'?$t('asset.createAssetTab.sshProtocol'):$t('asset.createAssetTab.telnetProtocol')}}</div>
-        </el-form-item>
-<!--        <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-show="!isEdit">-->
-<!--          <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>-->
-<!--        </el-form-item>-->
         <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
-          <el-input autocomplete="new-password" size="small" v-model="account.user" v-show="isEdit"/>
+          <el-input autocomplete="new-password" size="small" v-model="account.user"/>
-          <div class="right-box-form-content-txt" v-show="!isEdit">{{account.user}}</div>
         </el-form-item>
         <el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
           <el-radio-group v-model="account.authType" size="small">
@@ -37,37 +18,16 @@
             <el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="isEdit&&(account.authType==1 || account.protocol == 'TELNET')" >
+        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="(account.authType==1 || account.protocol == 'TELNET')" >
           <el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
         </el-form-item>
-        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="isEdit&&(account.authType==2 && account.protocol == 'SSH')" prop="file">
+        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="(account.authType==2 && account.protocol == 'SSH')" prop="file">
           <el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
         </el-form-item>
         <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
-          <el-input size="small" v-model.number="account.port" v-show="isEdit"/>
+          <el-input size="small" v-model.number="account.port"/>
-          <div class="right-box-form-content-txt" v-show="!isEdit">{{account.port}}</div>
         </el-form-item>
       </el-form>
-
-      <!--<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
-        <div class="telnet-option_title clickable" @click="isShowTelnetOption"><div style="width: 100px;">login option</div><div class="telnet-option_spilt"></div><div style="width: 20px"><i style="font-size: 12px;"  :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div></div>
-        <div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
-          {{$t('asset.createAssetTab.userPwdIntroduce')}}
-        </div>
-        <el-form-item :label="$t('asset.createAssetTab.userTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" >
-          <el-input type="text" size="small" v-model="account.userTip" />
-        </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.passwordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
-          <el-input type="text" size="small" v-model="account.passwordTip" />
-        </el-form-item>
-        <div v-show="isEdit && account.protocol=='TELNET' && showTelnetOption" class="auto-login-tip">
-          {{$t('asset.createAssetTab.reLoginPwdIntroduce')}}
-        </div>
-        <el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
-          <el-input type="text" size="small" v-model="account.reloginPasswordTip" />
-        </el-form-item>
-      </div>-->
-
     </div>
 </template>
 
@@ -77,7 +37,6 @@ export default {
     name: "accountConfig",
     props:{
       account:{type:Object},
-      isEdit:{type:Boolean,default:true},
       isAllowedChangeProtocol:{type:Boolean,default:true}
     },
     created() {

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -82,18 +82,6 @@
                 <span>{{$t("dashboard.overview.traffic")}}</span>
                 <span class="content-col-title-tools">
                   <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-                  <!--<el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectDatacenter">
-                    <span class="content-col-title-tool">{{$t("dashboard.overview.dataCenter.dataCenter")}}&nbsp;<i class="el-icon-arrow-down"></i></span>
-                    <el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
-                      <el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.dc.indexOf(item.id) > -1}" :command="item" v-for="(item,index) in trafficDatacenterData" :key="index">{{item.name}}</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                  <el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectTag">
-                    <span class="content-col-title-tool">{{$t("overall.tag")}}&nbsp;<i class="el-icon-arrow-down"></i></span>
-                    <el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
-                      <el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.tag.some(tag => {return item.name == tag.name && item.value == tag.value;})}" :command="item" v-for="(item,index) in trafficTagData" :key="index">{{item.name}}&nbsp;:&nbsp;{{item.value}}</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>-->
                   <span class="content-col-title-tool">
                     <el-cascader
                       :options="trafficData"
@@ -109,7 +97,6 @@
               </div>
               <div class="content-col-content">
                 <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
-<!--                <div class="no-data-tip" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">N/A</div>-->
                 <div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
               </div>
             </div>
@@ -117,8 +104,6 @@
               <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
               <div class="content-col-content">
                 <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
-<!--                <div class="no-data-tip" v-if="!mapLoading && (!map || !map.geoJson || !map.geoJson.geoJson)">N/A</div>-->
-<!--                <div class="chart-no-data" v-if="!mapLoading && (!map || !map.geoJson || !map.geoJson.geoJson)">No Data</div>-->
               </div>
             </div>
           </div>
@@ -909,8 +894,6 @@
         this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
           if (response.code === 200) {
             this.trafficData = this.convertTrafficData(response.data.list);
-
-            //console.info(this.trafficData)
           }
         });
       },
@@ -918,28 +901,14 @@
         let result = [];
         data.forEach(item => {
           let hasDc = result.some(dc => { //dc去重
-            if (dc.label == item.idc.name) {
+            if (item.idc && dc.label == item.idc.name) {
               return true;
             }
           });
-          if (!hasDc) {
+          if (item.idc && !hasDc) {
             result.push({label: item.idc.name, value: "$dc$::" + item.idc.name, level: 1});
           }
         });
-        /*data.forEach(item => {
-          let hasDc = result.some(dc => { //dc去重
-            if (dc.label == item.idc.name) {
-              handleTag(dc, item.tags);
-              return true;
-            }
-            return false;
-          });
-          if (!hasDc) {
-            let dc = {label: item.idc.name, value: "$dc$::" + item.idc.name, children: [], level: 1};
-            handleTag(dc, item.tags);
-            result.push(dc);
-          }
-        });*/
         function handleTag(dc, tagData) { // dc: cascader数据里的第一级；tagData: 原始数据中的tags
           if (tagData) {
             let tags = dc.children;
@@ -1386,7 +1355,6 @@
       }
     },
     mounted() {
-      this.initDate();
       this.initData();
       window.onresize = () => {
         setTimeout(() => {

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

@@ -105,7 +105,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)">{{scope.row[item.prop].host}}</span>
+              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(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>