diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index beee6313f..b3d4a4f02 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -370,7 +370,8 @@ const en = {
     },
     dc: {
       dc: 'Datacenter',
-
+      area: "Area",
+      cabinetNum: "Cabinet number"
     }
   },
   alert: {
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index b1f855dc6..d1aa3d465 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -29,6 +29,25 @@
             <el-input v-if="rightBox.isEdit" placeholder="" v-model="dc.location" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{dc.location}}</div>
           </el-form-item>
+          <el-form-item :label='$t("asset.createAssetTab.tel")' prop="tel">
+            <el-input v-if="rightBox.isEdit" placeholder="" v-model="dc.tel" size="small"></el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{dc.tel}}</div>
+          </el-form-item>
+          <el-form-item :label='$t("asset.createAssetTab.principal")' prop="principal">
+            <el-select value-key="id" popper-class="config-dropdown"
+                       v-model="dc.principal" placeholder="" v-if="rightBox.isEdit" size="small">
+              <el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username"
+                         :value="item.userId" :id="'dc-principal-op-'+item.userId">
+                <span>{{item.username}}</span>
+              </el-option>
+
+            </el-select>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{dc.tel}}</div>
+          </el-form-item>
+          <el-form-item :label='$t("config.dc.area")' prop="area">
+
+
+          </el-form-item>
         </el-form>
       </el-scrollbar>
 
@@ -51,7 +70,8 @@
   export default {
     name: "dcBox",
     props: {
-      dc: Object
+      dc: Object,
+      userData: Array
     },
     data() {
       return {
@@ -66,7 +86,97 @@
             {validator: noSpecialChar,trigger: "change"}
           ],
         },
-        projectList: [],
+        areaData: [],
+        data: {
+          code: 200,
+          msg: "success",
+          data: {
+            list: [{
+              id: 1,
+              pid: 0,
+              name: "astana",
+              longitude: 100.3,
+              latitude: 24.3,
+              i18n:{en:'astana',cn:'阿斯塔纳'},
+              children: [{
+                id: 2,
+                pid: 1,
+                name: "qu",
+                longitude: 100.3,
+                latitude: 24.3,
+                i18n:{en:'qu',cn:'阿斯塔纳一个区'},
+                children: [{
+                  id: 3,
+                  pid: 2,
+                  name: "qu2",
+                  longitude: 100.3,
+                  latitude: 24.3,
+                  i18n:{en:'qu2',cn:'阿斯塔纳二个区'}}
+                ]
+              }, {
+                id: 4,
+                pid: 0,
+                name: "alamutu",
+                longitude: 100.3,
+                latitude: 24.3,
+                i18n:{en:'alamutu',cn:'阿拉木图'},
+                children: [{
+                  id: 5,
+                  pid: 4,
+                  name: "qu3",
+                  longitude: 100.3,
+                  latitude: 24.3,
+                  i18n: {en: 'qu3', cn: '阿拉木图一个区'}
+                }]
+              }]
+            }]
+          }
+        },
+        data2: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2',
+            children: [{
+              id: 11,
+              label: '三级 3-2-1'
+            }, {
+              id: 12,
+              label: '三级 3-2-2'
+            }, {
+              id: 13,
+              label: '三级 3-2-3'
+            }]
+          }]
+        }],
       }
     },
     methods: {
@@ -135,8 +245,24 @@
           });
         });
       },
+      getAreaData() {
+        this.areaData = this.toTreeData(this.data);
+
+        /*this.$get('area', {}).then(response => {
+          if (response.code === 200) {
+            let rawData = response.data.list;
+            //将原始数据处理为el-tree格式
+
+          }
+        });*/
+      },
+      toTreeData(rawData) {
+
+        return rawData;
+      }
     },
-    created() {
+    mounted() {
+      this.getAreaData();
     },
     computed: {
     },
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 8bf81e0c4..76d1deb0b 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -54,12 +54,17 @@
               &nbsp;
               <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
             </div>
-            <template v-if="item.prop == 'principal'">
+            <template v-else-if="item.prop == 'principal'">
               <template v-for="item in userData">
                 <template v-if="scope.row.principal == item.userId">{{item.username}}</template>
               </template>
             </template>
-            <span v-else>{{scope.row[item.prop]}}</span>
+            <template v-else-if="item.prop == 'area'">
+              <template v-if="scope.row.area">{{scope.row.area.name}}</template>
+              <template v-else>-</template>
+            </template>
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+            <template v-else>-</template>
           </template>
         </el-table-column>
         <el-table-column width="28">
@@ -81,12 +86,12 @@
       ref="elementset"
     ></element-set>
 
-    <dc-box ref="dcBox" :dc="currentDc"></dc-box>
+    <dc-box ref="dcBox" :dc="currentDc" :user-data="userData"></dc-box>
   </div>
 </template>
 <script>
   export default {
-    name: "account",
+    name: "dc",
     data() {
       return {
         dc: {
@@ -120,6 +125,10 @@
             label: this.$t("overall.name"),
             prop: 'name',
             show: true,
+          }, {
+            label: this.$t("config.dc.cabinetNum"),
+            prop: 'cabinetNum',
+            show: true,
           }, {
             label: this.$t("asset.createAssetTab.location"),
             prop: 'location',
@@ -132,6 +141,10 @@
             label: this.$t('asset.createAssetTab.principal'),
             prop: 'principal',
             show: true
+          }, {
+            label: this.$t('config.dc.area'),
+            prop: 'area',
+            show: true
           }, {
             label: this.$t('config.account.option'),
             prop: 'option',