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

2020-09-08 14:16:05 +08:00
parent c701a17d99 f39bda14d0
commit d3a2f50e7e
12 changed files with 218 additions and 5267 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -472,6 +472,9 @@ li{
  padding-top: 24px;
  font-size: 14px;
 }
+.orange-font{
+  color:#FA901C;
+}
 .content-left .sidebar-info-item {
  line-height: 20px;
  padding: 0 0 0 10px;
--- a/nezha-fronted/src/components/common/elementSet.vue
+++ b/nezha-fronted/src/components/common/elementSet.vue
@@ -8,14 +8,17 @@
          v-for="(item,index) in custom"
          :key="index"
          class="custom-label"
-          :class="!allowedAll&&!item.allowed && (index==0 || index == 1 || item.NotSet) ? 'custom-label-disabled' : ''"
          @click="handler(item,index)"
          :id="'element-set-el-'+index"
+          :class="{'custom-title orange-font':item.type == 'title','custom-label-disabled':!allowedAll&&!item.allowed && (index==0 || index == 1 || item.NotSet)}"
        >
          <i class="el-icon-check" v-if="!allowedAll&&!item.allowed&&(index==0||index==1||item.visibility=='disabled')"></i>
          <i v-else class="el-icon-check" v-show="item.show"></i>
          <span>{{item.label}}</span>
        </div>
+
+
+
      </el-scrollbar>
    </div>
    <div class="custom-bottom-btns">
@@ -160,6 +163,9 @@ export default {
  cursor: default;
  font-size: 14px;
 }
+.custom-title{
+  padding: 2px 0 2px 2px;
+}
 .custom-label-disabled {
  cursor: not-allowed;
  background: #f1f3f4;
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -723,7 +723,7 @@
    width: 100%;
    height: 50px;
    background-color: #232f3e;
-    z-index: 510;
+    z-index: 1;
  }

  .menu-create {
--- a/nezha-fronted/src/components/common/js/geoJSONData.js
+++ b/nezha-fronted/src/components/common/js/geoJSONData.js
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -101,6 +101,28 @@
                </el-checkbox-group>
              </el-collapse-item>
            </el-collapse>
+            <!--tag 过滤-->
+            <div class="sidebar-title too-long-split orange-font">
+              Tag
+            </div>
+            <el-collapse v-model="activeTag" class="left-menu-bg">
+              <el-collapse-item :name="item.key" :title="item.key" v-for="item in tagData">
+                <el-checkbox-group v-model="tagCheckList" size="small" >
+                  <el-checkbox class="sidebar-info-item"  v-for="tag in item.values" :key="item.key+'-'+tag.value" :label="item.key+'-'+tag.value" @change="changeTagCheckBox(item,tag.value)">
+                    <div class="sidebar-info-item-txt">
+                      <el-popover v-if="tag.value.length > 14" trigger="hover" placement="top-start" :content="tag.value" >
+                        <span slot="reference">{{tag.value}}</span>
+                      </el-popover>
+                      <span v-else>{{tag.value}}</span>
+                    </div>
+                    <el-tooltip :content="''+tag.total" placement="top" effect="light" :disabled="tag.total<99">
+                      <el-badge class="mark" :value="tag.total" :max="99"/>
+                    </el-tooltip>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-collapse-item>
+            </el-collapse>
+
          </template>
          <template v-else>
            <div v-for="menu in $CONSTANTS.staticMenus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)">
@@ -151,6 +173,7 @@

          //asset相关
          activeType: 'dataCenter',
+          activeTag:'',
          dcData: [],
          dcCheckList: [],
          assetTypeData: [],
@@ -159,6 +182,10 @@
          vendorCheckList: [],
          pingData: [],
          pingCheckList: [],
+          tagData:[],
+          tagCheckList:[],
+          tagCheckMap:{},
+          lastCheckSize:0,
          assetPingSwitch:true,
        }
      },
@@ -183,9 +210,9 @@
            return "";
          }
        },
-        currentProjectChange() {
-          return this.$store.state.currentProject;
-        },
+        checkedTagCount(){
+          return this.tagCheckList.length;
+        }
      },
      watch: {
        route: {
@@ -410,6 +437,9 @@
                  item.value = item.status;
                  return item;
                });
+
+                this.tagData = response.data.tag
+
              }
              resolve();
            });
@@ -444,7 +474,34 @@
            bus.$emit("asset-filter-change", "pingStates", "");
          }
        },
+        changeTagCheckBox(tag,value){
+          let checked=this.tagCheckMap[tag.key];
+          if(!checked){
+            checked=[];
+          }
+          if(this.lastCheckSize < this.tagCheckList.length){
+            checked.push(value)
+          }else{
+            let index=checked.findIndex(item=>{
+              return item == value
+            })
+            checked.splice(index,1)
+          }

+          if(checked.length>0){
+            this.tagCheckMap[tag.key] = checked;
+          }else{
+            if(this.tagCheckMap[tag.key]){
+              delete this.tagCheckMap[tag.key]
+            }
+          }
+          this.lastCheckSize = this.tagCheckList.length;
+          if(Object.keys(this.tagCheckMap).length > 0){
+            bus.$emit("asset-filter-change", "tags", JSON.stringify(this.tagCheckMap));
+          }else{
+            bus.$emit("asset-filter-change", "tags", '');
+          }
+        },
        indOf(a, b) {
          let c = [];
          for (let i = 0; i < a.length; i++) {
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
@@ -10,7 +10,7 @@

    <!-- begin--表单-->
    <el-scrollbar class="right-box-form-box">
-      <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpoint" :model="endpoint" :rules="rules">
+      <el-form class="right-box-form right-box-form-left" label-position="right" ref="addEndpoint" :model="endpoint" :rules="rules">
        <!--project-->
        <el-form-item :label='$t("project.project.project")' prop="projectId">
          <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -96,11 +96,11 @@
            </div>
            <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
              <div class="tag-edit-box-body" v-for="(item, index) in editAsset.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 class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
+                  <el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey" @blur="loadValues(item)" @select="loadValues" popper-class="no-style-class"></el-autocomplete>
                </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 class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.value'">
+                  <el-autocomplete placeholder="value" size="mini" v-model="item.value" :fetch-suggestions="filterValue" popper-class="no-style-class"></el-autocomplete>
                </el-form-item>
                <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
              </div>
@@ -251,7 +251,10 @@
        formData:null,
        accountValidResult: true,
        changeProtocolSwitch: true,
-        exporterDisableSwitch: false
+        exporterDisableSwitch: false,
+        tagKeys:[],
+        tagValues:[],
+        tagValuesCache:new Map(),
      }
    },
    watch: {
@@ -618,13 +621,61 @@
        }else{
          this.exporterDisableSwitch = false;
        }
-      }
+      },
+      loadKeys:function(){
+        this.$get('/asset/tagKey').then(res=>{
+          if(res.code == 200){
+            this.tagKeys = res.data.list.map(item=>{
+                return {value:item}
+              })
+          }
+        })
+      },
+      loadValues:function(tag){
+        let tagVal=tag.tag && tag.tag!=''?tag.tag:tag.value
+        if(!tagVal || tagVal ==''){this.tagValues=[]; return; }
+
+        let value = this.tagValuesCache.get(tagVal)
+        if(!value){
+          value = [];
+          this.$get('/asset/tagValue?key='+tagVal).then(res => {
+            if(res.code == 200){
+              value = res.data.list.map(item=>{
+                return {value:item}
+              })
+
+              this.tagValues=Object.assign([],value)
+              this.tagValuesCache.set(tag.tag,Object.assign([],value))
+            }
+          })
+        }else{
+          this.tagValues=Object.assign([],value)
+        }
+      },
+      filterKey:function(input,callback){
+        if(!input || input == ''){
+          callback(this.tagKeys)
+        }else{
+          let result=this.tagKeys.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
+          callback(result)
+        }
+      },
+      filterValue:function(input,callback){
+        console.log(this.tagValues)
+        if(!input || input == ''){
+          callback(this.tagValues)
+        }else{
+          let result=this.tagValues.filter(item=>{return item.value.toLowerCase().indexOf(input.toLowerCase()) != -1})
+          callback(result)
+        }
+      },
    },
    mounted() {
      this.getUserData();
      this.getVendorData();
      this.getAssetTypeData();
      this.getDcData();
+      this.loadKeys();
      this.showAccountOp = false;
    }
  }
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -59,6 +59,10 @@
          :prop="$tableSet.propTitle(item.prop,'asset')"
          :sort-orders="['ascending', 'descending']"
        >
+          <template slot-scope="scope" slot="header">
+            <span v-if="item.type == 'tag'"><span>{{item.label}}</span><span style="color:orange;">&nbsp;[Tag]</span></span>
+            <span v-else><span>{{item.label}}</span></span>
+          </template>
          <template slot-scope="scope" :column="item">
            <div v-if="item.prop=='ID'">
              <span>{{scope.row.id}}</span>
@@ -118,6 +122,9 @@
          <div v-if="item.prop=='tel'">
            <span>{{scope.row.idc.tel}}</span>
          </div>
+          <template v-if="item.prop == 'tags'">
+            <span>{{filterTags(scope)}}</span>
+          </template>
          <template v-if="item.prop == 'option'">
            <span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
              class="el-icon-view"></i>
@@ -358,6 +365,7 @@
        },

        assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
+        tagKeys:[],
      }
    },
    watch: {
@@ -497,6 +505,7 @@
        if (refresh) {
          this.getTableData();
          bus.$emit('asset-list-change')
+          this.loadKeys();
        }
      },
      pageNo(val) {
@@ -642,6 +651,47 @@
        this.$nextTick(()=>{
          bus.$emit(event,param)
        })
+      },
+      loadKeys:function(){
+        this.$get('/asset/tagKey').then(res=>{
+          if(res.code == 200){
+            this.tagKeys = res.data.list.map(item=>{
+              return {label:item,prop:'tags',show:false,allowed: true,type:'tag'}
+
+            })
+            this.resetTableTitle()
+          }
+        })
+      },
+      resetTableTitle:function(){
+        let title = this.tools.customTableTitle;
+
+        let tableTitle = title.slice(0,this.tableTitle.length);
+
+        let tagTitle = title.slice(this.tableTitle.length,title.length);
+
+        let $self=this;
+        let newTags = this.tagKeys.filter(item=>{ return !tagTitle.find(t =>{return item.label == t.label})})
+        let keepTags = tagTitle.filter(item=>{ return $self.tagKeys.find(t =>{return item.label == t.label})})
+
+        let result = tableTitle.concat([{label:'Tag',show:false,NotSet:true,type:'title',prop:'table-tag'}])
+
+        result = result.concat(keepTags).concat(newTags)
+
+        this.tools.customTableTitle = JSON.parse(JSON.stringify(result))
+
+      },
+      filterTags:function(scope){
+        console.log(scope)
+        let tag=scope.column.label.split(' [Tag]')[0]
+        let tagVals=scope.row.tags
+        if(tagVals){
+          console.log('tags',tagVals,tag)
+          let showTag=tagVals.find(item=>{return item.tag == tag})
+          if(showTag){
+            return showTag.value
+          }
+        }
      }
    },

@@ -672,6 +722,11 @@
        }
      }
      this.tools.customTableTitle = tableTitle;
+
+      this.loadKeys();
+
+      console.log('load end')
+
      //初始化数据
      this.getUserData();
      this.getTableData();
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -405,6 +405,9 @@
        if (this.loading) {
          return;
        }
+
+        this.popShow();this.popHide()  //再调用一次，对数据赋值
+
        /*处理snmpset*/
        if (!set) {
          if (this.searchParam.operation == 'set') {
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -101,7 +101,20 @@
        }

        if(this.chartType == 'map'){
+          this.option.geo.regions = [];
+
          let geoObj = this.map.geoJson.geoJson;
+          geoObj.features.forEach(item=>{
+            if (item.properties.NAME_0 == "Kazakhstan") {
+              this.option.geo.regions.push({
+                name: item.properties.NAME_1,
+                itemStyle: {areaColor: "#eee"},
+                label: {show: true}
+              });
+            }
+          });
+          console.info(this.option.geo)
+          /*let geoObj = this.map.geoJson.geoJson;
          geoObj.features.forEach(item=>{
            if(this.option.geo.regions){
              this.option.geo.regions.push({
@@ -122,7 +135,7 @@
                }
              }]
            }
-          });
+          });*/
          //let timer = setTimeout(()=>{}, 0);
          //地图拖动、缩放时动态读取地图数据
          /*this.chart.on("georoam", params => {
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -139,6 +139,7 @@
    };
    const mapOptions={
      geo:{
+        itemStyle: {areaColor: "white"},
        map: '',
        roam: true,//鼠标是否可以控制缩放
        center: [67.45, 48],//当前视角的中心点，用经纬度表示
@@ -154,7 +155,7 @@
        },
        emphasis:{
          itemStyle: {
-            areaColor:'lightgray'
+            areaColor:'white'
          }
        },
        left:0,
@@ -162,19 +163,19 @@
        right:0,
        bottom:0,
        scaleLimit: {
-          min: 3,
-          max: 15
+          min: 4,
+          max: 8
        }
      },
      tooltip : {
        trigger: 'item',
        type:'cross',
        alwaysShowContent: false,
-        // backgroundColor: 'rgba(0,0,0,0.7)',
-        borderColor:'#ffffff',
+        backgroundColor: 'rgba(255,255,255,0.7)',
+        /*borderColor:'#ffffff',
        borderRadius: 4,
        borderWidth: 1,
-        padding: 0,
+        padding: 0,*/
      },
      backgroundColor: "#BDE3FD"
    };
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -1335,14 +1335,15 @@

 <style lang="scss">
  @import "./overview2.scss";
-  /*.tooltip{
-    padding:5px;
+  .tooltip{
+    padding: 5px;
    min-width: 500px;
-    background-color: rgba(221,228,237,1);
+    background-color: rgba(255, 255, 255, 0.7);
+    box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);
  }
  .tooltip-table{
-    border-spacing: 0px;
-    border-collapse:collapse;
+    border-spacing: 0;
+    border-collapse: collapse;
  }
  .tooltip-table tr{
    display: table-row;
@@ -1355,9 +1356,9 @@
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: left;
-    border: 1px solid #b9b9bf;
+    border: 1px solid #ccc;
    display: table-cell;
-    padding:0 5px ;
+    padding: 0 5px ;
    color: black;
  }
  .flex-box{
@@ -1367,5 +1368,5 @@
  .column-box{
    flex-direction: column;
    justify-content: space-between !important;
-  }*/
+  }
 </style>