feat:asset机柜配置&overview地图点显示优化

nezha-fronted/src/components/common/js/validate.js

@@ -2,6 +2,9 @@ import vm from '../../../main'
 import ca from "element-ui/src/locale/lang/ca";
 
 export function host(rule, value, callback) {
+  if(!value || value ==''){
+    callback();
+  }
   const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
   console.log(value)
   setTimeout(() => {

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

@@ -104,6 +104,7 @@
                 size="small"
                 placeholder=""
                 class="right-box-row-with-btn"
+                @change="modelChange"
               >
               </el-cascader>
               <div class="right-box-row-btn" v-if="!tabView" @click="addVendor"><i class="el-icon-plus"></i>
@@ -140,12 +141,12 @@
           <div class="right-box-sub-title">{{$t('asset.createAssetTab.location')}}</div>
           <div class="line-100 right-box-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
-          <el-form-item>
+          <el-form-item :label="$t('asset.createAssetTab.location')">
-<!--            <location-cascader :default-model-u-size="temp"></location-cascader>-->
+            <location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader"></location-cascader>
           </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
+          <!--<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
-<!--              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
+&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"
@@ -157,9 +158,9 @@
                   <span class="asset-dropdown-label-txt">{{ item.name }}</span>
                 </el-option>
               </el-select>
-<!--              <div class="right-box-row-btn ">-->
+&lt;!&ndash;              <div class="right-box-row-btn ">&ndash;&gt;
-<!--                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
+&lt;!&ndash;                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>&ndash;&gt;
-<!--              </div>-->
+&lt;!&ndash;              </div>&ndash;&gt;
             </template>
             <span v-if="tabView">{{assetViewData.idcName}}</span>
           </el-form-item>
@@ -174,10 +175,10 @@
           </el-form-item>
           <el-divider></el-divider>
 
-          <!------------------------------------------cabinet---------------------------------------------->
+          &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">
-<!--              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
+&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">
@@ -189,21 +190,21 @@
                   :value="item.id"
                 >
                   <span class="asset-dropdown-label-txt">{{ item.name }}</span>
-<!--                  <div class="asset-dropdown-label-icons">-->
+&lt;!&ndash;                  <div class="asset-dropdown-label-icons">&ndash;&gt;
-<!--                    <span class="asset-dropdown-btn asset-dropdown-btn-delete"-->
+&lt;!&ndash;                    <span class="asset-dropdown-btn asset-dropdown-btn-delete"&ndash;&gt;
-<!--                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">-->
+&lt;!&ndash;                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">&ndash;&gt;
-<!--                      <i class="el-icon-delete"></i>-->
+&lt;!&ndash;                      <i class="el-icon-delete"></i>&ndash;&gt;
-<!--                    </span>-->
+&lt;!&ndash;                    </span>&ndash;&gt;
-<!--                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">-->
+&lt;!&ndash;                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">&ndash;&gt;
-<!--                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
+&lt;!&ndash;                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>&ndash;&gt;
-<!--                    </cabinet-config-box>-->
+&lt;!&ndash;                    </cabinet-config-box>&ndash;&gt;
-<!--                  </div>-->
+&lt;!&ndash;                  </div>&ndash;&gt;
                 </el-option>
               </el-select>
 
-<!--              <div class="right-box-row-btn ">-->
+&lt;!&ndash;              <div class="right-box-row-btn ">&ndash;&gt;
-<!--                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>-->
+&lt;!&ndash;                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>&ndash;&gt;
-<!--              </div>-->
+&lt;!&ndash;              </div>&ndash;&gt;
             </template>
             <span v-if="tabView">{{assetViewData.cabinetName}}</span>
           </el-form-item>
@@ -213,7 +214,7 @@
           </el-form-item>
           <el-form-item :label="$t('asset.editAssetTab.remark')">
             <span>{{cabinetSelectedData.remark}}</span>
-          </el-form-item>
+          </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>
@@ -261,7 +262,6 @@
     },
     data() {
       return {
-        temp:3,
         visible: '',
         vendorModelData: '',
         assetData: {
@@ -291,6 +291,9 @@
           }],
           exporter: 0
         },
+        modelSize:1,
+        initLocationData:null,
+        locationInfo:null,
         accountSwitch:false,//true 开启，false 关闭
         accountData: '',
         assetViewData: {
@@ -525,6 +528,11 @@
         }else{
           this.changeProtocolSwitch=true;
         }
+      },
+      locationInfo:{
+        deep:true,
+        handler(n,o){
+        }
       }
     },
     methods: {
@@ -567,6 +575,16 @@
           }
         }
       },
+      setLocationData:function(data){
+        this.locationInfo=data;
+      },
+      modelChange:function(ids){
+        let modelId=ids[1];
+        let model=this.allModelUlData.find((item,index)=>{
+          return modelId==item.id;
+        })
+        this.modelSize=model.usize;
+      },
       getAssetData(data) {
         if (data) {
           this.pageObj.id = data;
@@ -576,8 +594,15 @@
               this.assetViewData.assetType = response.data.list[0].model.type.value
               this.assetViewData.vendor = response.data.list[0].model.vendor.value
               this.assetViewData.model = response.data.list[0].model.name
+              this.modelSize=response.data.list[0].model.usize;
               this.assetViewData.idcName = response.data.list[0].idc.name
               this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
+              let initLocationData={
+                idc:response.data.list[0].idc,
+                cabinet:response.data.list[0].cabinet,
+                u:[response.data.list[0].cabinetStart,response.data.list[0].cabinetEnd]
+              }
+              this.$refs.locationCascader.initComponet(initLocationData)
               this.assetViewData.moduleNum = response.data.list[0].moduleNum
               this.assetViewData.alertNum = response.data.list[0].alertNum
               this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
@@ -766,6 +791,10 @@
           if (this.assetData.modelId) {
             this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1];
           }
+          this.assetData.idcId=this.locationInfo.idc.id;
+          this.assetData.cabinetId=this.locationInfo.cabinet.id;
+          this.assetData.cabinetStart=this.locationInfo.u[0];
+          this.assetData.cabinetEnd=this.locationInfo.u[1];
           // let modelId = this.assetData.modelId.join(',').split(',')[1];
           // let form = new FormData();
           // form.append("id", this.pageObj.id);

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

@@ -1,33 +1,39 @@
 <template>
   <div class="location" >
     <div @click="toggleDropdown">
-      <el-input :placeholder="$t('overall.select')" size="small" style="position: relative" >
+      <el-input :placeholder="$t('overall.select')" size="small" style="position: relative" :value="inputShowInfo"  :readonly="true" :disabled="disabled">
         <i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-down" style="font-size: 14px" :class="{'reverse':dropDownVisible == true}"></i>
       </el-input>
     </div>
-    <div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}">
+    <div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}" >
       <div class="container">
         <div class="container-item">
           <el-scrollbar style="height: 100%;">
             <ul v-if="idcInfos&& idcInfos.length>0">
               <li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
-                <div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
+                <div class="container-item-content">
+                  <div :title="item.name" class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div>
+                  <div><i class="el-icon-arrow-right"></i></div>
+                </div>
               </li>
             </ul>
             <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
           </el-scrollbar>
         </div>
-        <div class="container-item" v-show="isShowCabinet">
+        <div class="container-item" v-show="isShowCabinet || selectedData.cabinet">
           <el-scrollbar style="height: 100%;">
             <ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
               <li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
-                <div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
+                <div class="container-item-content">
+                  <div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div>
+                  <div><i class="el-icon-arrow-right"></i></div>
+                </div>
               </li>
             </ul>
             <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
           </el-scrollbar>
         </div>
-        <div class="container-item" v-show="isShowCabinetU" style="border-right: unset">
+        <div class="container-item" v-show="isShowCabinetU || uChecked.length>0" style="border-right: unset">
           <el-scrollbar style="height: 100%">
             <el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
               <el-checkbox v-for="(item,index) in showUInfos" :key="index" :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
@@ -45,12 +51,19 @@
     name: "locationCascader",
     components:{
 
+    },
+    model:{
+      prop:'value',
+      event:'change'
     },
     props:{
-      defaultModelUSize:{default:1}
+      defaultModelUSize:{default:1},
+      value:{default:null},
+      disabled:{type:Boolean}
     },
     data(){
       return {
+        initData:null,
         dropDownVisible:false,
         idcInfos:[],
         cabinetInfos:new Map(),
@@ -76,7 +89,9 @@
     },
     methods:{
       toggleDropdown:function(){
-        this.dropDownVisible = !this.dropDownVisible;
+        if(this.disabled == false){
+          this.dropDownVisible = !this.dropDownVisible;
+        }
       },
       queryIdcInfos:function(){
         this.idcInfos=[];
@@ -89,7 +104,12 @@
         })
       },
       loadCabinetInfos:function(idc){
+        if(!idc){
+          return;
+        }
         this.selectedData.idc=idc;
+        this.selectedData.cabinet=null;
+        this.selectedData.u=null;
         let cabinetKey='idc-'+idc.name+'-'+idc.id;
         this.showCabinetInfos=[];
         if(this.cabinetInfos.has(cabinetKey)&&this.cabinetInfos.get(cabinetKey)&&this.cabinetInfos.get(cabinetKey).length>0){
@@ -108,11 +128,17 @@
         this.isShowCabinetU=false;
         this.showUInfos=[];
       },
-      loadCabinetUInfos:function(cabinet){
+      loadCabinetUInfos:function(cabinet,isInit=false){
+        if(!cabinet){
+          return ;
+        }
         this.selectedData.cabinet=cabinet;
+        this.selectedData.u=null;
         let cabinetUKey='cabinet-'+this.selectedData.idc.id+'-'+cabinet.id
         this.showUInfos=[];
         this.uChecked=[];
+        this.oldUChecked=[];
+        this.occupyU=[];
         if(this.uInfos.has(cabinetUKey)&&this.uInfos.get(cabinetUKey)&&this.uInfos.get(cabinetUKey).length>0){
           this.showUInfos=this.uInfos.get(cabinetUKey);
         }else{
@@ -133,6 +159,17 @@
                 us.push(u)
               }
               this.showUInfos=us;
+              if(isInit){ //回显处理
+                this.showUinfos=this.showUInfos.map((item,index)=>{
+                  if(item.value >= this.initData.u[0] && item.value <= this.initData.u[1]){
+                    item.occupy=false;//修改时，当前asset使用的u位不算占用
+                    this.occupyU=this.occupyU.filter((t,i)=>{return t != item.value})
+                    this.uChecked.push(item.value)
+                  }
+                })
+                this.oldUChecked=this.uChecked
+                this.selectedData.u=this.initData.u;
+              }
               this.uInfos.set(cabinetUKey,us);
             }else{
               console.error(response.msg);
@@ -145,15 +182,44 @@
       uChange:function(data){
         if(data.length < this.oldUChecked.length){ //取消选择操作
           //1.判断是否仅剩下defualtModelusize 的u位选中
-          let checkedValue=this.findUnoccupyU(this.oldUChecked);
+          let checkedValues=this.findUnoccupyU(this.oldUChecked);
-          if(checkedValue.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
+          if(checkedValues.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
-            this.uChecked=[];
+            this.clearUChecked();
-            this.uChecked.push(this.occupyU);
           }else{
             let unCheckValue=this.oldUChecked.filter((item)=>{//取消选择的那个元素
               return this.oldUChecked.includes(item)&&!data.includes(item);
             })
-            //2.判断是否连续，如果不是连续取消
+            unCheckValue=unCheckValue[0];
+            //2.判断是否连续，如果不是连续取消后面的选中
+            let oldUCheckCopy=this.findOldCheckedMinMax()
+            let min=oldUCheckCopy[0];
+            let max=oldUCheckCopy[oldUCheckCopy.length-1];
+            if(unCheckValue != min && unCheckValue != max){ //非连续取消选中
+              debugger
+              // 需要留下连续的 且 满足defaultModelUsize的u位
+              if(unCheckValue - min >= this.defaultModelUSize){ //上方满足条件
+                this.clearUChecked();
+                for(let i = min; i<unCheckValue;i++){
+                  this.uChecked.push(i);
+                }
+              }else if(max - unCheckValue >= this.defaultModelUSize){//下方满足条件
+                this.clearUChecked();
+                for(let i= unCheckValue+1;i<=max;i++){
+                  this.uChecked.push(i);
+                }
+              }else{//两边都不满足条件，则优先上方
+                this.clearUChecked();
+                let counter=0;
+                let item=min;
+                while(counter < this.defaultModelUSize){
+                  this.uChecked.push(item);
+                  counter++;
+                  item++;
+                }
+              }
+            }else{ //连续取消选中
+              //doNothing
+            }
           }
         }else{
           let checkValues=this.findUnoccupyU(data);
@@ -163,16 +229,14 @@
             if(suitU.length>0){ //有合适的u位
               while(this.uChecked.length - this.occupyU.length < this.defaultModelUSize){
                 let popU=suitU.splice(0,1)[0]
-                this.uChecked.push(popU.value);
+                this.uChecked.push(popU);
               }
             }else{
               this.uChecked.splice(this.uChecked.length-1,1);
             }
           }else{//至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
             //1.判断是否连续
-            let oldUCheckCopy=Object.assign([],this.oldUChecked);
+            let oldUCheckCopy=this.findOldCheckedMinMax()
-            oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
-            oldUCheckCopy.sort((a,b)=>{return a-b});
             let min=oldUCheckCopy[0];
             let max=oldUCheckCopy[oldUCheckCopy.length-1];
             if(checkValue - max > 1 ){ //不连续
@@ -213,9 +277,32 @@
           }
 
         }
+        console.log('最终选择结果：')
+        console.log(this.uChecked)
         this.oldUChecked=this.uChecked;
+        this.selectedData.u=this.findOldCheckedMinMax(this.uChecked);
+        this.$emit('change',this.selectedData);
+      },
+      clearUChecked:function(){ //取消所有选中，恢复到刚打开时的状态
+        this.uChecked=[];
+        this.uChecked=this.uChecked.concat(this.occupyU);
+      },
+      findOldCheckedMinMax:function(){
+        let oldUCheckCopy=Object.assign([],this.oldUChecked);
+        oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
+        if(oldUCheckCopy&&oldUCheckCopy.length>0){
+          oldUCheckCopy.sort((a,b)=>{return a-b});
+          let min=oldUCheckCopy[0];
+          let max=oldUCheckCopy[oldUCheckCopy.length-1];
+          return [min,max]
+        }else{
+          return [];
+        }
+
       },
       findUnoccupyU:function(arr){
+        console.log('findUnoccupyU')
+        console.log(this.occupyU)
         return  arr.filter((item,index)=>{
          return !this.occupyU.includes(item);
         })
@@ -230,7 +317,7 @@
         for(let i=0;i<left.length;i++){
           let item=left[i];
           if(item.occupy == false){
-            leftCount.push(item);
+            leftCount.push(item.value);
           }else{
             break;
           }
@@ -239,7 +326,7 @@
         for(let i=0;i<right.length;i++){
           let item=right[i];
           if(item.occupy == false){
-            rightCount.push(item);
+            rightCount.push(item.value);
           }else{
             break;
           }
@@ -255,10 +342,42 @@
         this.$nextTick(() => {
           this.refresh = true
         })
+      },
+      initComponet:function(initData){
+        this.initData=Object.assign({},initData);
+        if(initData){
+          this.selectedData.idc=initData.idc;
+          this.selectedData.cabinet=initData.cabinet;
+          this.selectedData.u=initData.u;
+          this.loadCabinetInfos(initData.idc);
+          this.loadCabinetUInfos(initData.cabinet,true);
+        }
       }
     },
     mounted() {
 
+    },
+    computed:{
+      inputShowInfo:function(){
+        let idcName=this.selectedData.idc?this.selectedData.idc.name+'/':'';
+
+        let cabinetName=this.selectedData.cabinet?this.selectedData.cabinet.name+'/':'';
+
+        let uValues=this.selectedData.u&&this.selectedData.u.length>0?this.selectedData.u[0]+'-'+this.selectedData.u[1]:'';
+
+        if(!this.selectedData.idc){
+          return '';
+        }else if(this.selectedData.idc && !this.selectedData.cabinet){
+          return idcName
+        }else if(this.selectedData.idc && this.selectedData.cabinet && !this.selectedData.u ){
+          return idcName+cabinetName;
+        }else if(this.selectedData.idc && this.selectedData.cabinet && this.selectedData.u){
+          return idcName+cabinetName+uValues;
+        }
+      }
+    },
+    watch:{
+
     }
   }
 </script>

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

@@ -27,7 +27,7 @@
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
           </el-form-item>-->
 
-          <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" class="add-required">
+          <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
             <el-cascader
               v-if="rightBox.isEdit"
               :options="modelOptions"
@@ -133,7 +133,8 @@
         checkModels:(rule, value, callback)=>{
           setTimeout(() => {
             if(!$temp.currentMib.models||$temp.currentMib.models == ''){
-              return callback(new Error($temp.$t('validate.required')))
+              // return callback(new Error($temp.$t('validate.required')))
+              return callback();
             }else{
               return callback();
             }

nezha-fronted/src/components/page/config/mib.vue

@@ -391,8 +391,8 @@
     margin:2px 0 !important;
   }
   .mib-table td .cell{
-    min-height: 60px !important;
+    /*min-height: 60px !important;*/
-    padding-bottom: 3px;
+    /*padding-bottom: 3px;*/
   }
   .mib-table td .cell .detail-item-content{
     height: 20px;
@@ -401,7 +401,6 @@
   }
   .mib-table.el-table td .cell{
     height: 20px !important;
-    line-height: 20px !important;
   }
 
 </style>

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

@@ -795,6 +795,17 @@
               dcStats=result[1].data.data.dcStat;
             }
             if(idcInfos && dcStats){
+              let dcStatsCopy=Object.assign([],dcStats);
+              dcStatsCopy.sort((a,b)=>{
+                return a.assetTotal - b.assetTotal;
+              });
+              let bigScatter=25;
+              let mediumScatter=20;
+              let smallScatter=15;
+              let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
+
+              let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
+              let mediumBoundary=Number.parseInt(maxAssetTotal/3);
               for(let dcStat of dcStats){
                 let dcId=dcStat.id;
                 let dcInfo=idcInfos.find((item)=>{
@@ -808,10 +819,20 @@
                   }else{
                     areaName=areaInfo.name;
                   }
+                  let symbolSize=mediumScatter;
+                  if(dcStat.assetTotal>=bigBoundary){
+                    symbolSize=bigScatter;
+                  }else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
+                    symbolSize=mediumScatter;
+                  }else{
+                    symbolSize=smallScatter;
+                  }
+
+                  console.log(dcStat.name+'-->'+ symbolSize)
                   seriesDatas.push({
                     name:areaName,
                     value:[areaInfo.longitude,areaInfo.latitude,dcStat],
-                    // symbolSize:5,
+                    symbolSize:symbolSize,
                   })
                 }
               }