feat：去除DataCenter area的选项 添加经纬度 以及状态的选项

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

@@ -140,6 +140,7 @@ export const intervalList = [
 
 export const setting = {
     DcState:[
-      {value:1,label: i18n.t('setting.usable')}
+      {value:'ON',label: i18n.t('config.dc.usable')},
+      {value:'OFF',label: i18n.t('config.dc.suspended')}
     ]
 };

nezha-fronted/src/components/common/language/cn.js

@@ -626,6 +626,9 @@ const cn = {
       editCabinet: "编辑机柜",
       usable:'可用',
       suspended:'停用',
+      state:'状态',
+      longitude:'经度',
+      latitude:'纬度',
     },
     model: {
       model: "资产型号",

nezha-fronted/src/components/common/language/en.js

@@ -602,6 +602,9 @@ const en = {
       },
       usable:'Usable',
       suspended:'Suspended',
+      state:'State',
+      longitude:'Longitude',
+      latitude:'Latitude',
     },
     model: {
       model: 'Asset model',

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

@@ -32,12 +32,43 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item :label='$t("config.dc.area")' prop="area">
+          <!--<el-form-item :label='$t("config.dc.area")' prop="area">-->
-            <select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">
+            <!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">-->
-              <template v-slot:trigger>
+              <!--<template v-slot:trigger>-->
-                <el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>
+                <!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>-->
-              </template>
+              <!--</template>-->
-            </select-area>
+            <!--</select-area>-->
+          <!--</el-form-item>-->
+          <el-form-item :label='$t("config.dc.state")' prop="state">
+            <el-select value-key="value" popper-class="config-dropdown" v-model="editDc.state" placeholder="" size="small">
+              <el-option @click.native="" v-for="item in $CONSTANTS.setting.DcState" :key="item.value" :label="item.label" :value="item.value" :id="'dc-principal-op-'+item.value">
+                <span>{{item.label}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label='$t("config.dc.longitude")' prop="longitude">
+            <el-input-number
+              placeholder=""
+              v-model="editDc.longitude"
+              size="small"
+              controls-position="right"
+              :min="-180"
+              :max="180"
+              :step="0.00001"
+              :precision="5"
+            />
+          </el-form-item>
+          <el-form-item :label='$t("config.dc.latitude")' prop="latitude">
+            <el-input-number
+              placeholder=""
+              v-model="editDc.latitude"
+              size="small"
+              controls-position="right"
+              :min="-90"
+              :max="90"
+              :step="0.00001"
+              :precision="5"
+            />
           </el-form-item>
         </el-form>
       </el-scrollbar>
@@ -57,6 +88,7 @@
 
 <script>
   import selectArea from "../popBox/selectArea"; //dc弹框
+  var  regNum = /^[0-9]+.?[0-9]*/;
   export default {
     name: "dcBox",
     props: {
@@ -73,6 +105,9 @@
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
+          state:[
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ]
         },
         areaData: [],
       }
@@ -95,10 +130,18 @@
         this.$refs.dcForm.validate((valid) => {
           if (valid) {
             if (this.editDc.id) {
-              if (this.editDc.area) {
+              let param={...this.editDc};
-                this.editDc.areaId = this.editDc.area.id;
+              if (param.area) {
+                param.areaId = param.area.id;
               }
-              this.$put('idc', this.editDc).then(response => {
+              if(!regNum.test(param.longitude)){
+                param.longitude=''
+              }
+              if(!regNum.test(param.latitude)){
+                param.latitude=''
+              }
+
+              this.$put('idc', param).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                   this.esc(true);
@@ -107,10 +150,17 @@
                 }
               });
             } else {
-              if (this.editDc.area) {
+              let param={...this.editDc}
-                this.editDc.areaId = this.editDc.area.id;
+              if (param.area) {
+                param.areaId = param.area.id;
               }
-              this.$post('idc', this.editDc).then(response => {
+              if(!regNum.test(param.longitude)){
+                param.longitude=''
+              }
+              if(!regNum.test(param.latitude)){
+                param.latitude=''
+              }
+              this.$post('idc', param).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                   this.esc(true);
@@ -141,13 +191,13 @@
           });
         });
       },
-      getAreaData() {
+      // getAreaData() {
-        this.$get('area', {pid: 0}).then(response => {
+      //   this.$get('area', {pid: 0}).then(response => {
-          if (response.code === 200) {
+      //     if (response.code === 200) {
-            this.areaData = response.data.list;
+      //       this.areaData = response.data.list;
-          }
+      //     }
-        });
+      //   });
-      },
+      // },
 
       selectArea(area) {
         this.editDc.area.id = area.id;
@@ -155,7 +205,7 @@
       }
     },
     mounted() {
-      this.getAreaData();
+      // this.getAreaData();
     },
     watch: {
       dc: {

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

@@ -59,7 +59,7 @@
           v-if="item.show"
           :key="`col-${index}`"
           :label="item.label"
-          :sortable="$tableSet.sortableShow(item.prop,'dc')"
+          :sortable="sortableShow(item.prop,'dc')"
           :prop="$tableSet.propTitle(item.prop,'dc')"
         >
           <template slot-scope="scope" :column="item">
@@ -78,8 +78,16 @@
               </template>
               <template v-else>-</template>
             </template>
-            <template v-else-if="item.prop == 'area'">
+            <template v-else-if="item.prop == 'state'">
-              <template v-if="scope.row.area">{{scope.row.area.name}}</template>
+              <template v-if="scope.row.state">{{$CONSTANTS.setting.DcState.find(val=>val.value===scope.row.state).label}}</template>
+              <template v-else>-</template>
+            </template>
+            <template v-else-if="item.prop == 'longitude'">
+              <template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
+              <template v-else>-</template>
+            </template>
+            <template v-else-if="item.prop == 'latitude'">
+              <template v-if="regNumTest(scope.row.latitude)">{{scope.row.latitude}}</template>
               <template v-else>-</template>
             </template>
             <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
@@ -135,6 +143,7 @@
   import dcBox from "../../common/rightBox/dcBox"; //dc弹框
   import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
   import deleteButton from "../../common/deleteButton";
+  var  regNum = /^[0-9]+.?[0-9]*/;
   export default {
     name: "dc",
     components:{
@@ -174,10 +183,13 @@
           location: '',
           tel: '',
           principal: '',
-          area: {
+          // area: {
-            id: 0,
+          //   id: 0,
-            name: ''
+          //   name: ''
-          }
+          // }
+          state:'ON',
+          longitude:undefined,
+          latitude:undefined,
         },
         rightBox: {
           dc: {show: false},
@@ -199,8 +211,16 @@
             prop: 'name',
             show: true,
           }, {
-            label: this.$t('config.dc.area'),
+            label: this.$t('config.dc.state'),
-            prop: 'area',
+            prop: 'state',
+            show: true
+          }, {
+            label: this.$t('config.dc.longitude'),
+            prop: 'longitude',
+            show: true
+          }, {
+            label: this.$t('config.dc.latitude'),
+            prop: 'latitude',
             show: true
           }, {
             label: this.$t("asset.location"),
@@ -263,6 +283,12 @@
       },
       edit(u) {
         this.dc = JSON.parse(JSON.stringify(u));
+        if(!regNum.test(this.dc.longitude)){
+          this.dc.longitude=undefined
+        }
+        if(!regNum.test(this.dc.latitude)){
+          this.dc.latitude=undefined
+        }
         if (!this.dc.area) {
           this.$set(this.dc, 'area', {id: '', name: ''});
         }
@@ -406,6 +432,12 @@
         this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
         this.bottomBox.showSubList = true;
       },
+      sortableShow(label,form){
+        if(label==='state'){
+          return false
+        }
+        return this.$tableSet.sortableShow(label,form)
+      },
       // 数据排序
       tableDataSort(item){
         let orderBy = '';
@@ -418,7 +450,9 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-
+      regNumTest(val){//校验是否是数字
+        return regNum.test(val)
+      },
       initEvent() {
         bus.$on("dc-list-change", () => {
           this.getTableData();

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

@@ -208,7 +208,7 @@
 
   var tooltipEndpointChart;
   var tooltipPrometheusChart;
-
+  var regNum = /^[0-9]+.?[0-9]*/
   export default {
     name: "overview2",
     components:{
@@ -859,8 +859,8 @@
                   let dcInfo = idcInfos.find((item) => {
                     return item.id == dcId;
                   })
-                  let areaInfo = dcInfo.area;
+                  let areaInfo = dcInfo;
-                  if (areaInfo) {
+                  if (regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)) {
                     let areaName = '';
                     if (areaInfo.i18n) {
                       areaName = JSON.parse(areaInfo.i18n)[language];
@@ -876,11 +876,15 @@
                     }else{
                       symbolSize=smallScatter;
                     }
-
+                    let marker=null;
-                    let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
+                   if(dcInfo.state==='ON'){
-
+                     let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
-                    let marker=L.circleMarker([areaInfo.latitude,areaInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''})
+                     marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''});
-                    marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
+                     marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
+                   } else{
+                     marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: '#010101',opacity:0.35,fillColor: '#010101',fillOpacity: 0.35, radius: symbolSize});
+                     marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
+                   }
                     marker.on("mouseover", (param) => {
                       //console.info(param);
                       let pane = document.querySelector(".leaflet-pane.leaflet-my-pane");
@@ -895,7 +899,7 @@
               }
             }
             res();
-          });
+          })
         })
       },
       queryDataCenterMapData() {
@@ -930,8 +934,8 @@
                 let dcInfo=idcInfos.find((item)=>{
                   return item.id == dcId ;
                 })
-                let areaInfo=dcInfo.area;
+                let areaInfo=dcInfo;
-                if(areaInfo){
+                if(regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)){
                   let areaName='';
                   if(areaInfo.i18n){
                     areaName=JSON.parse(areaInfo.i18n)[language];
@@ -949,7 +953,7 @@
 
                   seriesDatas.push({
                     name:areaName,
-                    value:[areaInfo.longitude,areaInfo.latitude,dcStat],
+                    value:[dcInfo.longitude,dcInfo.latitude,dcStat],
                     symbolSize:symbolSize,
                   });
                 }