diff --git a/Web/public/index.html b/Web/public/index.html
index 3e5a139..1bb8f06 100644
--- a/Web/public/index.html
+++ b/Web/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+	<script src="https://webapi.amap.com/maps?v=1.4.15&key=c6a4832b8afbde0361b36630a3fc5bdc"></script>
   </head>
   <body>
     <noscript>
diff --git a/Web/src/assets/style/lib/form.less b/Web/src/assets/style/lib/form.less
index 9f53965..763bf54 100644
--- a/Web/src/assets/style/lib/form.less
+++ b/Web/src/assets/style/lib/form.less
@@ -179,6 +179,41 @@
       margin-left: 0;
     }
   }
+  .yo-form-link {
+    display: flex;
+    align-items: center;
+
+    margin-bottom: -1px;
+    padding: @padding-md;
+
+    cursor: pointer;
+
+    border: @border-width-base @border-style-base @border-color-split;
+    background-color: @white;
+    &:hover {
+      background-color: darken(@white, 1%);
+    }
+    &:active {
+      background-color: darken(@white, 3%);
+    }
+    &--title {
+      font-size: @font-size-base + 1px;
+
+      flex: 1;
+    }
+    &--content {
+      flex: 1;
+
+      text-align: right;
+
+      color: fade(@black, 35%);
+    }
+    &--right-icon {
+      margin-left: @padding-xs;
+
+      color: fade(@black, 50%);
+    }
+  }
 }
 .yo-modal-form {
   .ant-modal-body {
diff --git a/Web/src/assets/style/lib/visibility.less b/Web/src/assets/style/lib/visibility.less
index bdb76ce..4597c9a 100644
--- a/Web/src/assets/style/lib/visibility.less
+++ b/Web/src/assets/style/lib/visibility.less
@@ -5,3 +5,18 @@
 .hidden {
   display: none !important;
 }
+.block {
+  display: block;
+}
+.inline-block {
+  display: inline-block;
+}
+.inline {
+  display: inline;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.flex {
+  display: flex;
+}
diff --git a/Web/src/assets/style/lib/width-height.less b/Web/src/assets/style/lib/width-height.less
index e4633ee..8e4055a 100644
--- a/Web/src/assets/style/lib/width-height.less
+++ b/Web/src/assets/style/lib/width-height.less
@@ -2,3 +2,24 @@
 .w-100-p {
   width: 100%;
 }
+.w-100 {
+  width: 100px;
+}
+.w-200 {
+  width: 200px;
+}
+.w-300 {
+  width: 300px;
+}
+.h-100-p {
+  height: 100%;
+}
+.h-100 {
+  height: 100px;
+}
+.h-200 {
+  height: 200px;
+}
+.h-300 {
+  height: 300px;
+}
diff --git a/Web/src/components/yoFormLink/index.js b/Web/src/components/yoFormLink/index.js
new file mode 100644
index 0000000..3e4fced
--- /dev/null
+++ b/Web/src/components/yoFormLink/index.js
@@ -0,0 +1,26 @@
+export default {
+    props: {
+        title: {
+            type: [String, Number],
+            default: ''
+        },
+        content: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+
+    render() {
+        return (
+            <div class="yo-form-link">
+                <div class="yo-form-link--title">
+                    {this.$scopedSlots.default ? this.$scopedSlots.default() : this.title}
+                </div>
+                <div class="yo-form-link--content">
+                    {this.$scopedSlots.content ? this.$scopedSlots.content() : this.content}
+                </div>
+                <a-icon type="right" class="yo-form-link--right-icon" />
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/Web/src/pages/business/house/houseCode/form.vue b/Web/src/pages/business/house/houseCode/form.vue
index cb8f26d..b93d05f 100644
--- a/Web/src/pages/business/house/houseCode/form.vue
+++ b/Web/src/pages/business/house/houseCode/form.vue
@@ -5,8 +5,14 @@
     2021-04-30
     Lufthafen
   -->
-  <container>
+  <container mode="container-sm">
     <br />
+    <div class="yo-form">
+      <div class="yo-form-group">
+        <yo-form-link content="对片区信息进行管理" title="片区管理" />
+        <yo-form-link content="对项目信息进行管理" title="项目管理" />
+      </div>
+    </div>
     <a-card>
       <a-form-model
         :label-col="labelCol"
@@ -17,8 +23,88 @@
       >
         <a-spin :spinning="loading">
           <a-icon slot="indicator" spin type="loading" />
+          <a-form-model-item class="ant-row-flex" label="房屋编码">
+            <a-row align="top" type="flex">
+              <a-col flex="50px">
+                <span>宁波市 -</span>
+              </a-col>
+              <a-col flex="auto">
+                <a-form-model-item class="mb-none" prop="areaCode">
+                  <a-cascader
+                    :display-render="({labels}) => labels.join(' - ')"
+                    :options="options"
+                    placeholder="请选择项目"
+                    v-model="form.areaCode"
+                  />
+                </a-form-model-item>
+              </a-col>
+              <a-col class="text-center" flex="20px">
+                <span>-</span>
+              </a-col>
+              <a-col flex="150px">
+                <a-form-model-item class="mb-none" prop="code">
+                  <a-input-number
+                    :formatter="(number) => `000${number}`.slice(-3)"
+                    :max="999"
+                    :min="1"
+                    :precision="0"
+                    :step="1"
+                    class="w-100-p"
+                    placeholder="请输入房屋序号"
+                    v-model="form.code"
+                  />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model-item>
+          <a-form-model-item class="ant-row-flex" label="地理坐标">
+            <a-row :gutter="16">
+              <a-col :span="12">
+                <a-form-model-item class="mb-none">
+                  <a-input disabled placeholder="请在地图上选择坐标" prefix="经度" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item class="mb-none">
+                  <a-input disabled placeholder="请在地图上选择坐标" prefix="纬度" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form-model-item>
+          <a-form-model-item :colon="false" :label="true" class="ant-row-flex">
+            <div class="yo-map-container">
+              缺搜索
+              <div class="h-300" ref="map"></div>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item class="ant-row-flex" label="房屋地址" prop="address">
+            <a-input placeholder="请输入房屋地址或在地图上选择地点" v-model="form.address" />
+          </a-form-model-item>
+          <a-form-model-item class="ant-row-flex" label="所属片区">
+            <a-select placeholder="请选择所属片区"></a-select>
+          </a-form-model-item>
           <a-form-model-item class="ant-row-flex" label="房屋性质">
-            <a-input />
+            <a-radio-group button-style="solid" v-model="form.nature">
+              <a-radio-button
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseType"
+              >{{ item.value }}</a-radio-button>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item
+            class="ant-row-flex"
+            label="所属行业、系统"
+            prop="industry"
+            v-if="form.nature == 2"
+          >
+            <a-select placeholder="请选择所属行业、系统" v-model="form.industry">
+              <a-select-option
+                :key="item.code"
+                :value="item.code"
+                v-for="item in houseIndustry"
+              >{{ item.value }}</a-select-option>
+            </a-select>
           </a-form-model-item>
         </a-spin>
       </a-form-model>
@@ -26,14 +112,21 @@
   </container>
 </template>
 <script>
+import YoFormLink from '@/components/yoFormLink';
+
 /* 表单内容默认值 */
 const defaultForm = {
   /* ... */
+  nature: '1',
 };
 
 export default {
   props: ['param'],
 
+  components: {
+    YoFormLink,
+  },
+
   data() {
     return {
       labelCol: { flex: '150px' },
@@ -44,6 +137,8 @@ export default {
       /** 验证格式 */
       rules: {
         /* ... */
+        areaCode: [{ required: true, message: '请选择房屋所在区域' }],
+        code: [{ required: true, message: '请输入房屋序号' }],
       },
 
       /** 加载异步数据状态 */
@@ -51,9 +146,54 @@ export default {
 
       /** 其他成员属性 */
       /* ... */
+      houseType: [],
+      houseIndustry: [],
+      options: [
+        {
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [
+            {
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [
+                {
+                  value: 'xihu',
+                  label: 'West Lake',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [
+            {
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [
+                {
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men',
+                },
+              ],
+            },
+          ],
+        },
+      ],
     };
   },
 
+  async created() {
+    await this.onInit();
+    this.onFillData({});
+  },
+
+  mounted() {
+    new AMap.Map(this.$refs.map);
+  },
+
   methods: {
     /**
      * 必要的方法
@@ -119,11 +259,23 @@ export default {
       this.loading = true;
       /** 可以在这里await获取一些异步数据 */
       /* ... */
+      await this.onLoadCodes();
       this.loading = false;
     },
 
     /** 当前组件的其他方法 */
     /* ... */
+    onLoadCodes() {
+      return this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_type' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_house_industry' }),
+        ])
+        .then(([dic_house_type, dic_house_industry]) => {
+          this.houseType = dic_house_type.data;
+          this.houseIndustry = dic_house_industry.data;
+        });
+    },
   },
 };
 </script>
\ No newline at end of file
