diff --git a/src/api/system/config.js b/src/api/system/config.js
index 87f0d628..e785df14 100644
--- a/src/api/system/config.js
+++ b/src/api/system/config.js
@@ -15,3 +15,11 @@ export function getSystemAttachmentUrl() {
     method: 'get'
   })
 }
+
+// 根据参数键名查询参数值
+export function getConfigKey(configKey) {
+  return request({
+    url: '/open/typz/configKey/' + configKey,
+    method: 'get'
+  })
+}
diff --git a/src/views/contracted/village/map/map.vue b/src/views/contracted/village/map/map.vue
index 7890df5b..f0e47b7a 100644
--- a/src/views/contracted/village/map/map.vue
+++ b/src/views/contracted/village/map/map.vue
@@ -13,6 +13,7 @@
     </div>
 
     <div style="position:relative;">
+      <div class="mapBox" id="landMapBox"></div>
       <div class="legend_main">
         <div class="legend">
           <p class="legend_tt">图例
@@ -24,33 +25,560 @@
           <div><i></i><p>开荒地</p></div>
           <div><i></i><p>其他地</p></div>
         </div>
-        <div class="legend_second">
-          <p class="legend_tt">
+        <div class="legend_second" >
+          <p class="legend_tt" id="drawLandPolygon">
             <img src="../../../../../static/images/contracted/map_icon_02.png" alt="">画图
           </p>
         </div>
       </div>
-      <div class="mapBox"></div>
+    </div>
+
+    <div class="landPopup">
+      <van-dialog v-model="open" :title="title" :show-confirm-button="false" :show-cancel-button="false">
+        <van-form ref="landForm">
+          <van-field v-model="form.dkbm" label="地块代码：" placeholder="请输入地块代码" required :rules="[{ required: true }]" :border="false" input-align="right" label-width="auto" > <!-- :disabled="isDisabled" -->
+            <template #button v-if="!isDisabled">
+              <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
+            </template>
+          </van-field>
+          <van-field v-model="form.dkmc" label="地块名称：" placeholder="请输入地块名称" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="syqxzText" label="所有权性质："
+                     placeholder="请选择所有权性质"
+                     required
+                     :rules="[{ required: true }]"
+                     :border="false"
+                     input-align="right"
+                     right-icon="arrow-down"
+                     readonly
+                     clickable
+                     @click="showOwnership = true"
+          />
+          <van-popup v-model="showOwnership" position="bottom" get-container=".app-container">
+            <van-picker
+              show-toolbar
+              :columns="syqxzOptions"
+              value-key="dictLabel"
+              @confirm="onConfirmOwnershipOptions"
+              @cancel="showOwnership = false"
+            />
+          </van-popup>
+          <van-field v-model="dklbText" label="地块类别："
+                     placeholder="请选择地块类别"
+                     required
+                     :rules="[{ required: true }]"
+                     :border="false"
+                     input-align="right"
+                     right-icon="arrow-down"
+                     readonly
+                     clickable
+                     @click="showLandCategory = true"
+          />
+          <van-popup v-model="showLandCategory" position="bottom" get-container=".app-container">
+            <van-picker
+              show-toolbar
+              :columns="dklbOptions"
+              value-key="dictLabel"
+              @confirm="onConfirmLandCategoryOptions"
+              @cancel="showLandCategory = false"
+            />
+          </van-popup>
+          <van-field v-model="tdlylxText" label="土地利用类型："
+                     placeholder="请选择土地利用类型"
+                     required
+                     :rules="[{ required: true }]"
+                     :border="false"
+                     input-align="right"
+                     right-icon="arrow-down"
+                     readonly
+                     clickable
+                     @click="showLandType = true"
+          />
+          <van-popup v-model="showLandType" position="bottom" get-container=".app-container">
+            <van-picker
+              show-toolbar
+              :columns="tdlylxOptions"
+              value-key="dictLabel"
+              @confirm="onConfirmLandTypeOptions"
+              @cancel="showLandType = false"
+            />
+          </van-popup>
+          <van-field v-model="dldjText" label="地力等级："
+                     placeholder="请选择地力等级"
+                     required
+                     :rules="[{ required: true }]"
+                     :border="false"
+                     input-align="right"
+                     right-icon="arrow-down"
+                     readonly
+                     clickable
+                     @click="showLandGrade = true"
+          />
+          <van-popup v-model="showLandGrade" position="bottom" get-container=".app-container">
+            <van-picker
+              show-toolbar
+              :columns="dldjOptions"
+              value-key="dictLabel"
+              @confirm="onConfirmLandGradeOptions"
+              @cancel="showLandGrade = false"
+            />
+          </van-popup>
+          <van-field v-model="tdytText" label="土地用途："
+                     placeholder="请选择土地用途"
+                     required
+                     :rules="[{ required: true }]"
+                     :border="false"
+                     input-align="right"
+                     right-icon="arrow-down"
+                     readonly
+                     clickable
+                     @click="showLandPurpose = true"
+          />
+          <van-popup v-model="showLandPurpose" position="bottom" get-container=".app-container">
+            <van-picker
+              show-toolbar
+              :columns="tdytOptions"
+              value-key="dictLabel"
+              @confirm="onConfirmLandPurposeOptions"
+              @cancel="showLandPurpose = false"
+            />
+          </van-popup>
+          <van-field v-model="form.sfjbnt" label="基本农田：" required :rules="[{ required: true }]" :border="false" input-align="right" >
+            <template #input>
+              <van-radio-group v-model="form.sfjbnt" direction="horizontal">
+                <!-- <van-radio name="1">是</van-radio>
+                <van-radio name="2">否</van-radio> -->
+                <van-radio v-for="dict in sfjbntOptions" :ke="dict.dictValue" :name="dict.dictValue">{{ dict.dictLabel }}</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field v-model="form.scmjm" type="number" label="实测面积(亩)：" placeholder="请输入实测面积(亩)" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.zjrxm" label="指界人姓名：" placeholder="请输入指界人姓名" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.dkdz" label="地块东至：" placeholder="请输入地块东至" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.dkxz" label="地块西至：" placeholder="请输入地块西至" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.dknz" label="地块南至：" placeholder="请输入地块南至" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.dkbz" label="地块北至：" placeholder="请输入地块北至" required :rules="[{ required: true }]" :border="false" input-align="right" />
+          <van-field v-model="form.dkbzxx" label="地块备注信息：" placeholder="请输入地块备注信息" :border="false" input-align="right" />
+        </van-form>
+        <div class="footer_main">
+          <van-button type="default" hairline size="large" @click="closePopup">关闭弹窗</van-button>
+          <van-button type="danger" hairline size="large" @click="deleteLand(form.id)" v-if="showDeleteBtn">删除地块</van-button>
+          <van-button type="info" hairline size="large" @click="saveLand" v-if="showSaveBtn">保存信息</van-button>
+        </div>
+    </van-dialog>
     </div>
 
   </div>
 </template>
 <script>
   import Cookies from "js-cookie";
+  import { getConfigKey } from "@/api/system/config";
+  import { getDept } from "@/api/contracted";
+  import { getDk, addDk, updateDk, deleteDk, generateLandCode } from "@/api/contracted/dk";
+  import $ from "jquery";
+
   export default {
     name: "contractedVillageContractor",
     data() {
       return {
-        loading:false,
-        finished:true,
-        value:''
+        form: {},                         // 地块信息表单参数
+        map: "",                          // 地图
+        mapGeoServerUrl: "",              // geoserver地址
+        mapCenterLocation: [],            // 地图中心坐标
+        landLayerName: "",                // 地块图层名称
+        landLayer: "",                    // 地块图层
+        mapBorder: "",                    // 地图边界
+        villageBorderLayerName: "",       // 乡镇边界图层名称
+        vectorLayer: "",                  // 绘制的矢量图层
+
+        title: "",                        // 弹出层标题
+        open: false,                      // 是否显示地块弹出层
+        syqxzOptions: [],                 // 所有权性质字典
+        syqxzText: null,                  // 所有权性质标签名
+        showOwnership: false,             // 控制所有权性质字典弹出层的显示和隐藏
+        dklbOptions: [],                  // 地块类别字典
+        dklbText: null,                   // 地块类别标签名
+        showLandCategory: false,          // 控制的地块类别字典弹出层的显示和隐藏
+        dldjOptions: [],                  // 地力等级字典
+        dldjText: null,                   // 地力等级标签名
+        showLandGrade: false,             // 控制地力等级字典弹出层的显示和隐藏
+        tdytOptions: [],                  // 土地用途字典
+        tdytText: null,                   // 土地用途标签名
+        showLandPurpose: false,           // 控制土地用途字典弹出层的显示和隐藏
+        tdlylxOptions: [],                // 土地利用类型
+        tdlylxText: null,                 // 土地利用类型标签名
+        showLandType: false,              // 控制土地利用类型字典弹出层的显示和隐藏
+        sfjbntOptions: [],                // 是否基本农田字典
+        showSaveBtn: false,               // 控制保存按钮的显示隐藏
+        showDeleteBtn: false,             // 控制删除按钮的显示隐藏
+        isDisabled: false,                // 是否禁用
       };
     },
     created() {
-
+      this.getDicts("land_ownership").then(response => {
+        this.syqxzOptions = response.data;
+      });
+      this.getDicts("land_type").then(response => {
+        this.dklbOptions = response.data;
+      });
+      this.getDicts("land_grade").then(response => {
+        this.dldjOptions = response.data;
+      });
+      this.getDicts("use_code").then(response => {
+        this.tdytOptions = response.data;
+      });
+      this.getDicts("land_use").then(response => {
+        this.tdlylxOptions = response.data;
+      });
+      this.getDicts("is_common").then(response => {
+        this.sfjbntOptions = response.data;
+      });
+      // 获取geoserver的地址
+      this.getGeoServerUrl();
+      // 获取地块图层名称
+      this.getLandLayerName();
+      // 获取村边界的图层名称
+      this.getVillageBorderLayerName();
+    },
+    mounted() {
+      // 初始化地图
+      setTimeout(() => {
+        this.initMap();
+      }, 500);
     },
     methods: {
+      // 获取geoserver的地址
+      getGeoServerUrl() {
+        getConfigKey("system.geoServer.url").then(response => {
+          this.mapGeoServerUrl = response.msg;
+        });
+      },
+      // 获取地块图层名称
+      getLandLayerName() {
+        getConfigKey("geoserver.layer.landCategory").then(response => {
+          this.landLayerName = response.msg;
+        });
+      },
+      // 获取村边界的图层名称
+      getVillageBorderLayerName() {
+        getConfigKey("geoserver.layer.villageBorder").then(response => {
+          this.villageBorderLayerName = response.msg;
+        });
+      },
+      // 初始化地图
+      initMap() {
+        getDept(this.$route.query.deptId).then(response => {
+          let dept = response.data;
+          if (dept.lng && dept.lat) {
+            this.mapCenterLocation = [dept.lng, dept.lat];
+          } else {
+            this.mapCenterLocation = [116.391458, 39.902377];
+          }
+          document.getElementById("landMapBox").innerHTML = "";
+          // 定义地图投影
+          let projection = new ol.proj.Projection({
+            code: "EPSG:3857",
+            units: "degrees",
+          });
+          // 定义地图图层
+          let aerial = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/img_w/wmts?" +
+                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "卫星影像图",
+          });
+          let yingxzi = new ol.layer.Tile({
+            source: new ol.source.XYZ({
+              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+            }),
+            isGroup: true,
+            name: "天地图文字标注--卫星影像图",
+          });
+          //加载地图
+          this.map = new ol.Map({
+            controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]),
+            layers: [aerial, yingxzi],
+            projection: projection,
+            target: "landMapBox",
+            view: new ol.View({
+              center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
+              zoom: 15.5,
+              minZoom: 1, //地图缩小限制
+              maxZoom: 18, //地图放大限制
+              // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
+            }),
+          });
+          // // 添加村边界
+          this.addVillageBorder();
+          // 添加地块图层
+          this.addLandLayer();
+          // 绘制地块
+          $("#drawLandPolygon").click(() => {
+            // 创建矢量数据源
+            let vectorSource = new ol.source.Vector({
+              wrapX: false,
+            });
+            // 创建矢量图层
+            this.vectorLayer = new ol.layer.Vector({
+              source: vectorSource,
+            });
+            // 添加图层
+            this.map.addLayer(this.vectorLayer);
+            // 地图交互-绘制图形
+            let drawInteraction = new ol.interaction.Draw({
+              source: vectorSource,
+              type: "Polygon",
+            });
+            // 添加交互
+            this.map.addInteraction(drawInteraction);
+            drawInteraction.on('drawend', (evt) => {
+              // 移除交互
+              this.map.removeInteraction(drawInteraction);
+              let coordinates = evt.feature.getGeometry().getCoordinates();
+              this.reset();
+              this.form.theGeom = JSON.stringify(coordinates);
+              this.title = "添加地块信息";
+              this.showSaveBtn = true;
+              this.showDeleteBtn = false;
+              this.isDisabled = false;
+              setTimeout(() => {
+                this.open = true;
+              }, 10);
 
+            });
+          });
+          // 地图点击事件
+          this.map.on("click", (evt) => {
+            // 点击宅基地查看详情
+            if (this.landLayer) {
+              const viewResolution = this.map.getView().getResolution();
+              const url = this.landLayer.getSource()
+                .getFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {'INFO_FORMAT': 'application/json'});
+              if (url) {
+                fetch(url)
+                  .then(response => response.json())
+                  .then(data => {
+                    if (data.features.length > 0) {
+                      let id = data.features[0].id.split(".")[1];
+                      getDk(id).then(response => {
+                        const data = response.data;
+                        this.reset();
+                        this.form = data;
+                        this.syqxzText = this.selectDictLabel(this.syqxzOptions, data.syqxz);
+                        this.dklbText = this.selectDictLabel(this.dklbOptions, data.dklb);
+                        this.dldjText = this.selectDictLabel(this.dldjOptions, data.dldj);
+                        this.tdytText = this.selectDictLabel(this.tdytOptions, data.tdyt);
+                        this.tdlylxText = this.selectDictLabel(this.tdlylxOptions, data.tdlylx);
+                        this.title = "查看地块信息";
+                        this.showSaveBtn = false;
+                        this.showDeleteBtn = true;
+                        this.isDisabled = true;
+                        setTimeout(() => {
+                          this.open = true;
+                        }, 10);
+                      });
+
+                      /* if (this.selectedHomesteadLayer) {
+                        this.map.removeLayer(this.selectedHomesteadLayer);
+                        this.selectedHomesteadLayer = "";
+                      }
+                      this.selectedHomesteadLayer = new ol.layer.Vector({
+                        source: new ol.source.Vector({
+                          features: new ol.format.GeoJSON().readFeatures(data)
+                        }),
+                        name: 'selectedHomesteadLayer',
+                        style: new ol.style.Style({
+                          fill: new ol.style.Fill({
+                            //矢量图层填充颜色，以及透明度
+                            color: "rgba(255, 84, 87, 0.3)",
+                          }),
+                          stroke: new ol.style.Stroke({
+                            //边界样式
+                            color: "#ff5457",
+                            width: 3,
+                          }),
+                        })
+                      });
+                      // this.map.addLayer(this.selectedHomesteadLayer);
+                      this.map.getLayers().insertAt(4, this.selectedHomesteadLayer);*/
+                    }
+                  });
+              }
+            }
+          });
+        });
+      },
+      // 添加地块图层
+      addLandLayer() {
+        this.landLayer = new ol.layer.Image({
+          source: new ol.source.ImageWMS({
+            url: this.mapGeoServerUrl + '/wms',
+            params: {
+              LAYERS: this.landLayerName,
+              cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
+              SRID: 3857,
+              abc: Math.random()        // 无效参数，保证每次发送的请求都不一样
+            }
+          }),
+          name: 'landLayer'
+        });
+        this.map.getLayers().insertAt(3, this.landLayer);
+        // this.map.addLayer(this.landLayer);
+      },
+      // 添加村边界
+      addVillageBorder() {
+        this.mapBorder = new ol.layer.Image({
+          source: new ol.source.ImageWMS({
+            url: this.mapGeoServerUrl + '/wms',
+            params: {
+              LAYERS: this.villageBorderLayerName,
+              cql_filter: "dept_id = '" + this.$route.query.deptId + "'",
+              SRID: 3857,
+            },
+          }),
+          name: 'villageBorderLayer'
+        });
+        this.map.getLayers().insertAt(2, this.mapBorder);
+      },
+      saveLand() {
+        this.$refs.landForm.validate().then(() => {
+          if (this.form.id) {
+            this.showSaveBtn = false;
+            updateDk(this.form).then(response => {
+              if (response.code == 200) {
+                this.$toast({
+                  icon: 'success',
+                  message: '保存成功',
+                  duration:"1000",
+                  onClose: () => {
+                    this.open = false;
+                    this.showSaveBtn = true;
+                  }
+                });
+              }
+            });
+          } else {
+            this.form.deptId = this.$route.query.deptId;
+            this.showSaveBtn = false;
+            addDk(this.form).then(response => {
+              if (response.code == 200) {
+                this.$toast({
+                  icon: 'success',
+                  message: '保存成功',
+                  duration:"1000",
+                  onClose: () => {
+                    this.open = false;
+                    this.showSaveBtn = true;
+                    // 移除矢量图层
+                    this.map.removeLayer(this.vectorLayer);
+                    this.vectorLayer = "";
+                    // 移除地块图层重新加载
+                    this.map.removeLayer(this.landLayer);
+                    this.landLayer = "";
+                    this.addLandLayer();
+                  }
+                });
+              }
+            });
+          }
+        }).catch(() => {
+          this.$notify({ type: 'danger', message: '请填写完整的表单项' });
+        });
+      },
+      deleteLand(id) {
+        this.$dialog.confirm({
+          message: '是否确认删除此地块？',
+        }).then(() => {
+          // on confirm
+          this.showDeleteBtn = false;
+          deleteDk(id).then(res => {
+            if (res.code == 200) {
+              this.$toast({
+                icon: 'success',
+                message: '删除成功',
+                duration: "1000",
+                onClose: () => {
+                  this.open = false;
+                  this.showDeleteBtn = true;
+                  // 移除地块图层重新加载
+                  this.map.removeLayer(this.landLayer);
+                  this.landLayer = "";
+                  this.addLandLayer();
+                }
+              });
+            }
+          });
+        }).catch(() => {
+          // on cancel
+        });
+      },
+      onConfirmOwnershipOptions(value){
+        this.form.syqxz = value.dictValue;
+        this.syqxzText = value.dictLabel;
+        this.showOwnership = false;
+      },
+      onConfirmLandCategoryOptions(value){
+        this.form.dklb = value.dictValue;
+        this.dklbText = value.dictLabel;
+        this.showLandCategory = false;
+      },
+      onConfirmLandTypeOptions(value) {
+        this.form.tdlylx = value.dictValue;
+        this.tdlylxText = value.dictLabel;
+        this.showLandType = false;
+      },
+      onConfirmLandGradeOptions(value) {
+        this.form.dldj = value.dictValue
+        this.dldjText = value.dictLabel;
+        this.showLandGrade = false;
+      },
+      onConfirmLandPurposeOptions(value){
+        this.form.tdyt = value.dictValue;
+        this.tdytText = value.dictLabel;
+        this.showLandPurpose = false;
+      },
+      generateCode() {
+        generateLandCode({deptId: this.$route.query.deptId}).then(response => {
+          this.$set(this.form, 'dkbm', response.data);
+        });
+      },
+      closePopup() {
+        // 移除矢量图层
+        if (this.vectorLayer) {
+          this.map.removeLayer(this.vectorLayer);
+          this.vectorLayer = "";
+        }
+        this.open = false;
+        this.reset();
+      },
+      reset() {
+        this.form = {
+          deptId: null,
+          dkbm: null,
+          dkmc: null,
+          syqxz: null,
+          dklb: null,
+          tdlylx: null,
+          dldj: null,
+          tdyt: null,
+          sfjbnt: '1',
+          scmjm: null,
+          zjrxm: null,
+          dkdz: null,
+          dkxz: null,
+          dknz: null,
+          dkbz: null,
+          dkbzxx: null,
+          theGeom: null
+        };
+        this.syqxzText = null;
+        this.dklbText = null;
+        this.dldjText = null;
+        this.tdytText = null;
+        this.tdlylxText = null;
+      },
     },
   };
 </script>
@@ -74,6 +602,20 @@
     border: none;
   }
 
+  /deep/ .van-field--disabled .van-field__label {
+    color: #646566;
+  }
+
+  /deep/ .landPopup .van-dialog {
+    width: 90%;
+    height: 85%;
+    overflow-y: auto;
+  }
+
+  /deep/ .landPopup .van-field__label {
+    width: 7em;
+  }
+
   .head{
     padding: 0 4vw;
   }
@@ -140,24 +682,24 @@
         margin-right: 10PX;
       }
       &:nth-child(2) i{
-        background: rgba(12,255,0,.5);
-        border-color: rgba(12,255,0,1);
+        background: rgba(22,233,15,.7);
+        border-color: rgba(22,233,15,1);
       }
       &:nth-child(3) i{
-        background: rgba(255,137,5,.5);
-        border-color: rgba(255,137,5,1);
+        background: rgba(1,198,222,.7);
+        border-color: rgba(1,198,222,1);
       }
       &:nth-child(4) i{
-        background: rgba(246,255,0,.5);
-        border-color: rgba(246,255,0,1);
+        background: rgba(238,238,0,.7);
+        border-color: rgba(238,238,0,1);
       }
       &:nth-child(5) i{
-        background: rgba(168,0,255,.5);
-        border-color: rgba(168,0,255,1);
+        background: rgba(238,60,60,.7);
+        border-color: rgba(238,60,60,1);
       }
       &:nth-child(6) i{
-        background: rgba(0,234,255,.5);
-        border-color: rgba(0,234,255,1);
+        background: rgba(235,134,0,.7);
+        border-color: rgba(235,134,0,1);
       }
     }
   }
@@ -169,4 +711,12 @@
     background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
   }
 
+  .footer_main {
+    flex: 0 0 120px;
+    background: #ccc;
+    display: flex;
+    justify-content: center; /* 相对父元素水平居中 */
+    align-items: center; /*  子元素相对父元素垂直居中 */
+  }
+
 </style>