TASK 45751 地块属性和地块经营

package.json

@@ -33,6 +33,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "jquery": "^3.7.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",

rongxin.dashboard.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

src/api/business/resourceLand.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询地块属性列表
+export function listResourceLand(query) {
+  return request({
+    url: '/business/resourceLand/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地块属性详细
+export function getResourceLand(DKBM) {
+  return request({
+    url: '/business/resourceLand/' + DKBM,
+    method: 'get'
+  })
+}
+
+// 查询地块属性详细
+export function getResourceLandDetail(DKBM) {
+  return request({
+    url: '/business/resourceLand/detail/' + DKBM,
+    method: 'get'
+  })
+}
+
+
+// 新增地块属性
+export function addResourceLand(data) {
+  return request({
+    url: '/business/resourceLand/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改地块属性
+export function updateResourceLand(data) {
+  return request({
+    url: '/business/resourceLand/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除地块属性
+export function delResourceLand(DKBM) {
+  return request({
+    url: '/business/resourceLand/delete/' + DKBM,
+    method: 'get'
+  })
+}
+
+// 打印地块属性
+export function printResourceLand(query) {
+  return request({
+    url: '/business/resourceLand/print',
+    method: 'get',
+    params: query
+  })
+}

src/api/business/resourceOperation.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询地块经营列表
+export function listResourceOperation(query) {
+  return request({
+    url: '/business/resourceOperation/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询地块经营详细
+export function getResourceOperation(id) {
+  return request({
+    url: '/business/resourceOperation/' + id,
+    method: 'get'
+  })
+}
+
+// 查询地块经营详细
+export function getResourceOperationDetail(id) {
+  return request({
+    url: '/business/resourceOperation/detail/' + id,
+    method: 'get'
+  })
+}
+
+
+// 新增地块经营
+export function addResourceOperation(data) {
+  return request({
+    url: '/business/resourceOperation/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改地块经营
+export function updateResourceOperation(data) {
+  return request({
+    url: '/business/resourceOperation/update',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除地块经营
+export function delResourceOperation(id) {
+  return request({
+    url: '/business/resourceOperation/delete/' + id,
+    method: 'get'
+  })
+}
+
+// 打印地块经营
+export function printResourceOperation(query) {
+  return request({
+    url: '/business/resourceOperation/print',
+    method: 'get',
+    params: query
+  })
+}

src/components/house/MapField.vue

@@ -0,0 +1,286 @@
+<template>
+  <div>
+    <div :id="'map-element' + elementId" class="map-element" style="width: 100%; height: 100%;"></div>
+    <div :id="'draw-toolbar' + elementId" class='draw-toolbar' v-show="allowDraw">
+      <el-row>
+        <input :id="'drawPolygon' + elementId" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
+        <input :id="'drawRemove' + elementId" type="button" class="ant-btn ant-btn-red" value="取消画图"/>&nbsp;&nbsp;
+        <input :id="'drawReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置画图"/>
+      </el-row>
+    </div>
+    <div :id="'mark-toolbar' + elementId" class='draw-toolbar' v-show="allowMark">
+      <el-row>
+        <input :id="'markPoint' + elementId" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
+        <input :id="'markReset' + elementId" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import $ from "jquery";
+  import {olMap} from "@/utils/ol_map";
+
+  const TYPE_NONE = 0; // 无交互 默认
+  const TYPE_DRAW = 1; // 绘制多边形 v-model为MultiPolygon的JSON
+  const TYPE_SELECT = 2; // 选择, 必须指定list属性 v-model为list索引, 未选中为-1
+  const TYPE_MARK = 3; // 标记点 v-model为[经度, 维度]数组
+
+  export default {
+    name: "MapField",
+    props: {
+      minMapZoom: {
+        type: Number,
+        default: 16,
+      },
+      maxMapZoom: {
+        type: Number,
+        default: 18.9,
+      },
+      allowDraw: {
+        type: Boolean,
+        default: false,
+      },
+      type: {
+        type: [Number, String], // 0 原始 1 绘制 2 选择
+        default: 0,
+      },
+      coord: {
+        type: Array,
+        default: function() {
+          return [115.452752, 31.789033];
+        },
+      },
+      value: {
+        type: [String, Array, Number],
+      },
+      list: {
+        type: Array,
+        default: function() {
+          return [];
+        },
+      },
+      allowSelect: {
+        type: Boolean,
+        default: false,
+      },
+      allowMark: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isInited: false,
+        mapObject: null,
+        mapResult: null,
+        elementId: ('_' + Math.random()).replaceAll('.', ''),
+        internalValue: null, // string only
+      };
+    },
+    created() {
+    },
+    mounted() {
+      this.Init();
+      this.SetupCoord();
+      if(this.list)
+        this.mapObject.SetLayers(this.list);
+      if(this.value)
+        this.SetValue(this.value);
+    },
+    watch: {
+      value: function(newVal, oldVal) {
+        this.SetValue(newVal);
+      },
+      coord: {
+        handler: function(newVal, oldVal) {
+          this.SetupCoord();
+        },
+        deep: true,
+      },
+      list: {
+        handler: function(newVal, oldVal) {
+          if(this.type == TYPE_SELECT)
+          {
+            this.mapObject.ClearSelection();
+            this.mapObject.SetLayers(newVal);
+            if(this.internalValue >= 0 && this.internalValue < this.list.length)
+              this.mapObject.SetSelection(this.list[this.internalValue].name);
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      SetValue(val) {
+        if(this.internalValue === val)
+          return;
+        this.internalValue = val;
+        this.UpdateValueToMap();
+      },
+      UpdateValueToMap() {
+        this.SetupCoord();
+        if(this.type == TYPE_SELECT)
+        {
+          this.mapObject.ClearSelection();
+          if(this.internalValue >= 0 && this.internalValue < this.list.length)
+            this.mapObject.SetSelection(this.list[this.internalValue].name);
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.mapObject.RemoveDrawLayer();
+          if(this.internalValue && this.internalValue.length > 0)
+          {
+            let json = olMap.gen_polygon([this.internalValue]);
+            this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, json, null, null, {
+              'style.stroke.width': 10,
+              'style.stroke.color': '#FF0000',
+            });
+          }
+          else
+            this.mapObject.PopLayer(olMap.MAP_FIELD_INIT_LAYER_NAME);
+        }
+        else
+        {
+          this.mapObject.RemoveDrawLayer();
+          this.mapObject.SetLayer(olMap.MAP_FIELD_INIT_LAYER_NAME, this.internalValue);
+        }
+      },
+      Init() {
+        if(this.isInited)
+          return;
+        this.mapObject = new olMap('map-element' + this.elementId);
+        if(this.type == TYPE_DRAW)
+        {
+          this.mapObject.SetAllowDraw(this.allowDraw);
+          let self = this;
+          $("#drawPolygon" + this.elementId).click(function () {
+            self.mapObject.StartDraw();
+          });
+          //清除画图鼠标点击事件
+          $("#drawRemove" + this.elementId).click(function () {
+            self.mapObject.ClearDraw();
+          });
+          //还原之前图层
+          $("#drawReset" + this.elementId).click(function () {
+            self.mapObject.ResetDraw();
+          });
+          this.mapObject.SetCallback("draw::start", () => {
+            this.mapResult = null;
+          });
+          this.mapObject.SetCallback("draw::remove", () => {
+          });
+          this.mapObject.SetCallback("draw::end", (res) => {
+            this.mapResult = res;
+            this.SetInternalValue();
+          });
+          this.mapObject.SetCallback("draw::reset", () => {
+            this.mapResult = null;
+          });
+        }
+        else if(this.type == TYPE_SELECT)
+        {
+          this.mapObject.SetAllowSelect(this.allowSelect);
+          this.mapObject.SetCallback("interactive::select", (name) => {
+            console.log('select -> ' + name);
+            this.mapResult = name;
+            this.SetInternalValue();
+            this.$emit('select', name);
+          });
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.mapObject.SetAllowMark(this.allowMark);
+          let self = this;
+          $("#markPoint" + this.elementId).click(function () {
+            self.mapObject.StartMark();
+          });
+          //还原之前图层
+          $("#markReset" + this.elementId).click(function () {
+            self.mapObject.ResetMark();
+          });
+          this.mapObject.SetCallback("mark::start", () => {
+            this.mapResult = null;
+          });
+          this.mapObject.SetCallback("mark::end", (res) => {
+            this.mapResult = res;
+            this.SetInternalValue();
+          });
+          this.mapObject.SetCallback("mark::reset", () => {
+            this.mapResult = null;
+          });
+        }
+        this.isInited = true;
+        if(this.internalValue)
+          this.UpdateValueToMap();
+      },
+      DestroyMap() {
+        if(!this.mapObject)
+          return;
+        //delete this.mapObject;
+        this.mapObject.DestroyMap();
+        this.mapObject = null;
+      },
+      SetInternalValue() {
+        if(this.type == TYPE_SELECT)
+        {
+          this.internalValue = this.mapResult;
+          if(this.mapResult)
+            this.internalValue = this.list.findIndex((x) => x.name == this.mapResult);
+          else
+            this.internalValue = -1;
+          this.$emit('input', this.internalValue);
+        }
+        else if(this.type == TYPE_MARK)
+        {
+          this.internalValue = this.mapResult ? this.mapResult : [null, null];
+          this.$emit('input', this.internalValue);
+        }
+        else
+        {
+          this.internalValue = JSON.stringify(this.mapResult);
+          this.$emit('input', this.internalValue);
+        }
+        //console.log(this.type, this.mapResult, this.internalValue);
+      },
+      Update() {
+        if(this.mapObject)
+          this.mapObject.Update();
+      },
+      SetupCoord() {
+        if(this.mapObject && this.coord && this.coord.length >= 2 && this.coord[0] && this.coord[1])
+          this.mapObject.SetCoord(this.coord[0], this.coord[1]);
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+  .map-element {
+    width: 100%;
+    height: 100%;
+  }
+
+  .draw-toolbar {
+    position: relative;
+    width: 40%;
+    left: 60%;
+    bottom: 95%;
+    z-index: 2000;
+  }
+
+  .ant-btn-red {
+    position: relative;
+    display: inline-block;
+    background: #D0EEFF;
+    border: 1px solid #99D3F5;
+    border-radius: 4px;
+    padding: 4px 12px;
+    overflow: hidden;
+    color: #1E88C7;
+    text-decoration: none;
+    text-indent: 0;
+    line-height: 20px;
+  }
+</style>

src/utils/ol_map.js

@@ -0,0 +1,727 @@
+
+const MAP_FIELD_DRAW_LAYER_NAME = '_Draw_layer';
+const MAP_FIELD_INIT_LAYER_NAME = '_Init_layer';
+
+export const olMap = function(selector) {
+  this.selector = selector;
+  this.mapObject = null;
+  this.minMapZoom = 16;
+  this.maxMapZoom = 18;
+  this.allowDraw = false;
+  this.allowSelect = false;
+  this.allowMark = false;
+  this.coord = [115.452752, 31.789033];
+  this.isInited = false;
+  this.error = null;
+  this.userLayers = [];
+  this.callback = {
+    'draw::start': [],
+    'draw::end': [],
+    'draw::remove': [],
+    'draw::reset': [],
+    'interactive::select': [],
+    'mark::start': [],
+    'mark::end': [],
+    'mark::reset': [],
+  };
+  // 当前支持的配置和默认值, 支持.拼接的字符串作为键(只能一级)
+  const SUPPORT_CONFIG = {
+    style: {
+      fill: {
+        color: 'rgba(204, 255, 204, 0.3)', // 多边形填充颜色
+        'color::SELECTED': "rgb(204, 255, 255, 0.5)", // 选择模式下选中时的多边形填充颜色
+      },
+      stroke: {
+        color: '#47c68f', // 线颜色
+        width: 3, // 线宽
+        'color::SELECTED': '#00FFFF', // 选择模式下选中时的线颜色
+        'width::SELECTED': 8, // 选择模式下选中时的线宽
+      },
+      text: {
+        font: 'normal 12px 微软雅黑', // 字体
+        fill: {
+          color: '#FF0000', // 文字颜色
+        }
+      }
+    }
+  };
+  this.drawResult = null;
+  this.draw = null;
+  this.currentSelect = null;
+  this.markResult = null;
+
+  this.__ASSERT = function(cond, msg) {
+    if(!cond)
+      this.__SetError(msg || '错误');
+    return !!cond;
+  };
+  // 设置回调
+  this.SetCallback = function(type, func) {
+    if(!func || !this.callback.hasOwnProperty(type))
+      return false;
+    let arr = this.callback[type];
+    if(arr.includes(func))
+      return false;
+    arr.push(func);
+    return func;
+  };
+  // 移除回调, 函数为空则移除该回调类型下的所有函数
+  this.RemoveCallback = function(type, func = null) {
+    if(!this.callback.hasOwnProperty(type))
+      return false;
+    if(func)
+    {
+      let arr = this.callback[type];
+      let index = arr.indexOf(func);
+      if(index >= 0)
+      {
+        arr.splice(index, 1);
+        return true;
+      }
+      return false;
+    }
+    else
+    {
+      this.callback[type] = [];
+      return true;
+    }
+  };
+  // 清空全部回调
+  this.ClearCallback = function() {
+    for(let k in this.callback)
+      this.callback[k] = [];
+  };
+  // private 调用回调
+  this.__Callback = function(type/*, 其他参数 */) {
+    let args = [];
+    for(let i = 1; i < arguments.length; i++)
+      args.push(arguments[i]);
+    this.callback[type].forEach((x) => x(...args));
+  };
+  // private 请求必须初始化, 未初始化则错误
+  this.__RequireInited = function() {
+    return this.__ASSERT(this.IsInited(), '地图未初始化');
+  };
+  // private 设置当前错误, 并抛出错误
+  this.__SetError = function(err) {
+    this.error = err;
+    if(this.error)
+    {
+      console.error(err);
+      throw this.error;
+    }
+  };
+  // 是否完成初始化
+  this.IsInited = function() {
+    return this.mapObject !== null;
+  };
+  // 初始化, 如果已初始化则错误
+  this.Init = function() {
+    this.__ASSERT(!this.IsInited(), '已经初始化');
+    this.__CreateMap(this.selector);
+    this.isInited = true;
+  };
+  // 销毁地图对象, 如果未初始化则返回
+  this.DestroyMap = function() {
+    if(!this.IsInited())
+      return;
+    this.ClearCallback();
+    this.userLayers = [];
+    //delete this.mapObject;
+    document.querySelector('#' + this.selector).innerHTML = '';
+    this.mapObject = null;
+  };
+  // private 创建地图元素, 已初始化则错误, 元素ID未指定则错误
+  this.__CreateMap = function() {
+    this.__ASSERT(!this.IsInited(), '已经初始化');
+    this.__ASSERT(this.selector, '元素ID缺失');
+
+    let projection = new ol.proj.Projection({
+      //地图投影类型
+      code: "EPSG:3857",
+      units: "degrees",
+      //extent:extent
+    });
+    let aerial = new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: "http://t0.tianditu.gov.cn/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: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
+      }),
+      isGroup: true,
+      name: "天地图文字标注--卫星影像图",
+    });
+
+    //加载地图
+    let map = new ol.Map({
+      // interactions: ol.interaction.DragPan({
+      //   onFocusOnly: false
+      // }),
+      controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
+      layers: [aerial, yingxzi],
+      projection: projection,
+      target: this.selector,
+      logo: 'false',
+      view: new ol.View({
+        center: ol.proj.fromLonLat(this.coord),
+        //zoom: false,
+        zoom: 17.9,
+        minZoom: this.minMapZoom, //地图缩小限制
+        maxZoom: this.maxMapZoom, //地图放大限制
+      }),
+    });
+
+    this.mapObject = map;
+    //console.log(map, map.getProperties());
+  };
+  // 获取配置值
+  this.__GetConfig = function(config, name, defVal) {
+    if(!config || typeof(config) !== 'object')
+      return defVal;
+    if(config.hasOwnProperty(name))
+      return config[name];
+    let arr = name.split('.');
+    let ptr = config;
+    for(let i in arr)
+    {
+      ptr = ptr[arr[i]];
+      //console.log(arr[i], JSON.stringify(ptr));
+      if(!ptr)
+        break;
+    }
+    //console.log(`__GetConfig(${name}) -> ${ptr}`);
+    if(ptr === undefined || ptr === null || ptr === '')
+      return defVal;
+    return ptr;
+  };
+  // 获取默认配置值
+  this.GetDefaultConfig = function(name) {
+    let arr = name.split('.');
+    let ptr = SUPPORT_CONFIG;
+    for(let i in arr)
+    {
+      ptr = ptr[arr[i]];
+      if(!ptr)
+        break;
+    }
+    return ptr;
+  };
+  // 设置当前坐标点
+  this.SetCoord = function(lng, lat) {
+    this.__RequireInited();
+    this.mapObject.getView().setCenter(ol.proj.fromLonLat([lng, lat]));
+    //console.log('SetCoord', lng, lat,this.mapObject);
+    return true;
+  };
+  // 获取地图投影对象
+  this.GetProjection = function() {
+    this.__RequireInited();
+    return this.mapObject.get('view').getProjection();
+  };
+  // 检查名称是否存在
+  this.ExistsName = function(name) {
+    if(this.userLayers.length === 0)
+      return false;
+    let res = this.userLayers.findIndex((x) => {
+      return x.name === name;
+    });
+    return res !== -1;
+  };
+  // private 检查名称是否存在, 存在则错误
+  this.__CheckNameExists = function(name) {
+    return this.__ASSERT(!this.ExistsName(name), `标识重复: ${name}`);
+  };
+  // private 放入图层, 名称存在则错误
+  this.__PushLayer = function(name, layer, title = null, data = null, config = null) {
+    this.__RequireInited();
+    this.__CheckNameExists(name);
+    this.mapObject.addLayer(layer);
+    //console.log(name, layer);
+    this.userLayers.push({
+      name: name,
+      layer: layer,
+      visible: true,
+      title: title,
+      data: data,
+      config: config,
+    });
+    return true;
+  };
+  // 根据索引获取图层, 索引可为负数, 索引无效则错误
+  this.GetLayer = function(index) {
+    if(this.userLayers.length === 0)
+      return null;
+    let i = index < 0 ? this.userLayers.length + index : index;
+    this.__ASSERT(i >= 0 && i < this.userLayers.length, `无效索引: ${index}`);
+    return this.userLayers[i];
+  };
+  // 根据名称查找图层, 名称不存在返回null
+  this.FindLayer = function(name) {
+    if(this.userLayers.length === 0)
+      return null;
+    return this.userLayers.find((x) => x.name === name);
+  };
+  // private 搜索图层, 索引/名称, orFail为真, 则未找到时错误
+  this.__SearchLayer = function(name, orFail = false) {
+    let layer = null;
+    let index = -1;
+    if(typeof(name) === 'number')
+    {
+      let i = name < 0 ? this.userLayers.length + name : name;
+      if(i >= 0 && i < this.userLayers.length)
+      {
+        layer = this.userLayers[i];
+        index = i;
+      }
+    }
+    else
+    {
+      let i = this.userLayers.findIndex((x) => x.name === name);
+      if(i >= 0)
+      {
+        layer = this.userLayers[i];
+        index = i;
+      }
+    }
+    if(orFail && index === -1)
+      this.__SetError(`未找到图层: ${name}(${typeof(name)})`);
+    return [layer, index];
+  };
+  // 带出图层数据 索引/名称, 未找到则返回null, 找到会移除图层数据, 但不会从地图移除图层
+  this.__TakeLayer = function(name) {
+    if(this.userLayers.length === 0)
+      return null;
+    let [layer, index] = this.__SearchLayer(name);
+    if(index !== -1)
+      this.userLayers.splice(index, 1);
+    return layer;
+  };
+  // 移除图层, 如果不指定name, 则移除最后一个
+  this.PopLayer = function(name = null) {
+    this.__RequireInited();
+    //console.log("pop", name, typeof(name));
+    if(name === null)
+      name = -1;
+    let layer = this.__TakeLayer(name);
+    if(layer)
+      this.mapObject.removeLayer(layer.layer);
+    return layer !== null;
+  };
+  // 设置图层显隐
+  this.SetLayerVisible = function(name, on) {
+    this.__RequireInited();
+    let [layer, ] = this.__SearchLayer(name, true);
+    layer.visible = true;
+    layer.layer.setVisible(on);
+    return true;
+  };
+  // 隐藏图层
+  this.HideLayer = function(name) {
+    return this.SetLayerVisible(name, false);
+  };
+  // 显示图层
+  this.ShowLayer = function(name) {
+    return this.SetLayerVisible(name, true);
+  };
+  // 开始绘制
+  this.StartDraw = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.allowDraw, '未开启绘制');
+    this.drawResult = null;
+    this.__Callback('draw::start');
+
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.mapObject.removeInteraction(this.draw);
+    let drawLayer = new ol.layer.Vector({
+      source: new ol.source.Vector(),
+    });
+
+    this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer);
+    this.draw = new ol.interaction.Draw({
+      source: drawLayer.getSource(),
+      type: "Polygon"
+    });
+    let self = this;
+    this.draw.on('drawend', function (evt) {
+      self.mapObject.removeInteraction(self.draw);
+      let feature = evt.feature;
+      let geometry = feature.getGeometry();
+      let coordinate = geometry.getCoordinates();
+      self.drawResult = coordinate;
+      self.__Callback('draw::end', self.drawResult);
+    });
+    this.mapObject.addInteraction(this.draw);
+    //console.log("drawPolygon");
+  };
+  // 移除绘制
+  this.ClearDraw = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有开始绘制');
+    this.mapObject.removeInteraction(this.draw);
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.draw = null;
+    this.drawResult = null;
+    this.__Callback('draw::remove');
+    this.__Callback('draw::end', '');
+  };
+  // 重置绘制
+  this.ResetDraw = function() {
+    this.ClearDraw();
+    this.StartDraw();
+    this.__Callback('draw::reset');
+  };
+  // 设置是否启用绘制
+  this.SetAllowDraw = function(on) {
+    this.__RequireInited();
+    if(this.allowDraw == on)
+      return;
+    this.allowDraw = on;
+    this.RemoveDrawLayer();
+  };
+  this.RemoveDrawLayer = function() {
+    this.__RequireInited();
+    if(this.draw)
+    {
+      this.ClearDraw();
+      this.draw = null;
+    }
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.drawResult = null;
+    this.markResult = null;
+  };
+  // 更新视图
+  this.Update = function() {
+    this.__RequireInited();
+    this.mapObject.updateSize();
+  };
+  // 新增/替换图层
+  this.SetLayer = function(name, theGeom, title = null, data = null, config = null) {
+    this.__RequireInited();
+    this.PopLayer(name);
+    this.AddLayer(name, theGeom, title, data, config);
+  };
+  // 新增图层(name不可存在)
+  this.AddLayer = function(name, theGeom, title = null, data = null, config = null) {
+    //console.log("pop", name, theGeom);
+    if(!theGeom)
+      return false;
+    this.__RequireInited();
+    this.__CheckNameExists(name);
+    if(typeof(theGeom) !== 'object')
+      theGeom = JSON.parse(theGeom);
+    let features = {
+      type: 'Feature',
+      geometry: theGeom,
+      properties: {
+        name: name,
+        title: title,
+        data: data,
+      },
+    };
+    //地图只加载一次
+    //加载地图编辑
+    //图层查询定位开始 ---------start
+    let hc_land = new ol.layer.Vector({
+      title: name,
+      source: new ol.source.Vector({
+        projection: this.GetProjection(),
+        features: new ol.format.GeoJSON().readFeatures(JSON.stringify(features)),
+      }),
+      style: new ol.style.Style({
+        fill: new ol.style.Fill({
+          //矢量图层填充颜色，以及透明度
+          color: this.__GetConfig(config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"),
+        }),
+        stroke: new ol.style.Stroke({
+          //边界样式
+          color: this.__GetConfig(config, 'style.stroke.color', "#47c68f"),
+          width: this.__GetConfig(config, 'style.stroke.width', 3),
+        }),
+        //矢量标注样式设置函数，设置image为图标ol.style.Icon
+        text: new ol.style.Text({
+          textAlign: "center", //位置
+          textBaseline: "middle", //基准线
+          font: this.__GetConfig(config, 'style.text.font', "normal 12px 微软雅黑"), //文字样式
+          text: title, //文本内容
+          fill: new ol.style.Fill({
+            //文本填充样式（即文字颜色)
+            color: this.__GetConfig(config, 'style.text.fill.color', "#FF0000"),
+          }),
+        }),
+      }),
+    });
+    if(!this.__PushLayer(name, hc_land, title, data, config))
+      return false;
+    let maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
+    let maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
+    let minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
+    let minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
+    //定位查询位置
+    let center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
+    this.mapObject.getView().animate({
+      // 只设置需要的属性即可
+      center: center, // 中心点
+      zoom: 17.9, // 缩放级别
+      rotation: undefined, // 缩放完成view视图旋转弧度
+      duration: 1000, // 缩放持续时间，默认不需要设置
+    });
+    return true;
+  };
+  // 新增图层列表
+  this.AddLayers = function(list /* name, theGeom, title = null, data = null, config = null */) {
+    if(!list.length)
+      return;
+    this.__RequireInited();
+    for(let i in list)
+    {
+      let {name, theGeom, title, data, config} = list[i];
+      this.AddLayer(name, theGeom, title, data, config);
+    }
+  };
+  // 清除所有用户图层
+  this.Clear = function() {
+    this.__RequireInited();
+    for(let i in this.userLayers)
+      this.PopLayer(name);
+    this.userLayers = [];
+  };
+  // 设置图层列表
+  this.SetLayers = function(list /* name, theGeom, title = null, data = null, config = null */) {
+    this.Clear();
+    this.AddLayers(list);
+  };
+  this.SetAllowSelect = function(on) {
+    this.__RequireInited();
+    if(this.allowSelect == on)
+      return;
+    this.allowSelect = on;
+    this.ClearSelection();
+    if(this.allowSelect)
+    {
+      let self = this;
+      this.mapObject.on("singleclick", function (evt) {
+        let feature = self.mapObject.forEachFeatureAtPixel(
+          evt.pixel,
+          (feature) => feature,
+        );
+        self.SetSelection(feature ? feature.values_.name : null, true);
+      });
+    }
+    else
+    {
+      this.mapObject.on("singleclick", null);
+    }
+  };
+  this.ClearSelection = function() {
+    this.__RequireInited();
+    if(this.currentSelect)
+    {
+      this.__ResetStyle(this.currentSelect);
+      this.currentSelect = null;
+    }
+  };
+  this.SetSelection = function(name, callback = false) {
+    this.__RequireInited();
+    if(name)
+    {
+      if(name !== this.currentSelect)
+      {
+        this.ClearSelection();
+        this.__HighlightStyle(name);
+      }
+      else if(this.currentSelect)
+      {
+        name = null;
+        this.ClearSelection();
+      }
+    }
+    else
+    {
+      if(this.currentSelect)
+      {
+        name = null;
+        this.ClearSelection();
+      }
+    }
+    this.currentSelect = name;
+    if(callback)
+      this.__Callback('interactive::select', this.currentSelect);
+  };
+  this.__ResetStyle = function(name) {
+    let ulayer = this.FindLayer(name);
+    let style = ulayer.layer.getStyle();
+    style.setFill(new ol.style.Fill({
+      //矢量图层填充颜色，以及透明度
+      color: this.__GetConfig(ulayer.config, 'style.fill.color', "rgba(204, 255, 204, 0.3)"),
+    }));
+    style.setStroke(new ol.style.Stroke({
+      //边界样式
+      color: this.__GetConfig(ulayer.config, 'style.stroke.color', "#47c68f"),
+      width: this.__GetConfig(ulayer.config, 'style.stroke.width', 3),
+    }));
+    ulayer.layer.setStyle(style);
+  };
+  this.__HighlightStyle = function(name) {
+    let ulayer = this.FindLayer(name);
+    //console.log(this.mapObject, ulayer, ulayer.layer.getStyle());
+    let style = ulayer.layer.getStyle();
+    style.setFill(new ol.style.Fill({
+      //矢量图层填充颜色，以及透明度
+      color: this.__GetConfig(ulayer.config, 'style.fill.color::SELECTED', "rgb(204, 255, 255, 0.5)"),
+    }));
+    style.setStroke(new ol.style.Stroke({
+      //边界样式
+      color: this.__GetConfig(ulayer.config, 'style.stroke.color::SELECTED', "#00FFFF"),
+      width: this.__GetConfig(ulayer.config, 'style.stroke.width::SELECTED', 8),
+    }));
+    ulayer.layer.setStyle(style);
+  };
+  // 设置是否启用标记
+  this.SetAllowMark = function(on) {
+    this.__RequireInited();
+    if(this.allowMark == on)
+      return;
+    this.allowMark = on;
+    this.RemoveDrawLayer();
+  };
+  // 开始标记
+  this.StartMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.allowMark, '未开启标记');
+    this.markResult = null;
+    this.__Callback('mark::start');
+
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    let sourceMap = new ol.source.Vector({wrapX: false});
+    let drawLayer = new ol.layer.Vector({
+      source: sourceMap,
+    });
+
+    this.__PushLayer(MAP_FIELD_DRAW_LAYER_NAME, drawLayer);
+    this.draw = new ol.interaction.Draw({
+      source: drawLayer.getSource(),
+      type: "Point"
+    });
+    //this.draw.__sourceMap = sourceMap;
+    let self = this;
+    this.draw.on('drawend', function (evt) {
+      if(self.draw)
+      {
+        self.__ClearMark();
+        self.StartMark();
+      }
+      let feature = evt.feature;
+      let geometry = feature.getGeometry();
+      let coordinate = geometry.getCoordinates();
+      self.markResult = coordinate;
+      let newFeature = new ol.Feature({
+        geometry: new ol.geom.Point(coordinate), //几何信息
+        //name: "标注点",
+      });
+      newFeature.setStyle(new ol.style.Style({
+        image: new ol.style.Icon({
+          //设置图标偏移
+          anchor: [0.5, 1],
+          //标注样式的起点位置
+          anchorOrigin: "top-right",
+          //X方向单位：分数
+          anchorXUnits: "fraction",
+          //Y方向单位：像素
+          anchorYUnits: "fraction",
+          //偏移起点位置的方向
+          offsetOrigin: "top-right",
+          //透明度
+          opacity: 0.9,
+          //图片路径
+          src: require("@/assets/images/dataScreen/plotPremises/mark.png"),
+        }),
+/*        text: new ol.style.Text({
+          textAlign: "center", //位置
+          textBaseline: "middle", //基准线
+          font: "normal 12px 微软雅黑", //文字样式
+          //text: "标注点", //文本内容
+          fill: new ol.style.Fill({
+            //文本填充样式（即文字颜色)
+            color: "#ff0000",
+          }),
+        }),*/
+        zIndex: 9999,
+      }));
+      self.draw.source_.addFeature(newFeature);
+      self.__Callback('mark::end', self.markResult);
+    });
+    this.mapObject.addInteraction(this.draw);
+    //console.log("drawPolygon");
+  };
+  // 移除标记
+  this.__ClearMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有开始标记');
+    this.mapObject.removeInteraction(this.draw);
+    this.draw = null;
+  };
+  // 重置标记
+  this.ResetMark = function() {
+    this.__RequireInited();
+    this.__ASSERT(this.draw, '没有标记');
+    this.mapObject.removeInteraction(this.draw);
+    this.PopLayer(MAP_FIELD_DRAW_LAYER_NAME);
+    this.markResult = null;
+    this.__Callback('mark::reset');
+  };
+
+  // 构造初始化
+  if(this.selector)
+    this.Init();
+  return this;
+};
+
+// olMap类静态成员
+olMap.MAP_FIELD_DRAW_LAYER_NAME = MAP_FIELD_DRAW_LAYER_NAME;
+olMap.MAP_FIELD_INIT_LAYER_NAME = MAP_FIELD_INIT_LAYER_NAME;
+olMap.gen_multipoint = function() {
+  let json = {
+    type: 'MultiPoint',
+    coordinates: [],
+  };
+  for(let i in arguments)
+  {
+    json.coordinates.push(arguments[i]);
+  }
+  return json;
+};
+olMap.gen_multipoint_json = function() {
+  return JSON.stringify(this.gen_multipoint(...arguments));
+};
+olMap.gen_point = function(x, y, z) {
+  let json = {
+    type: 'Point',
+    coordinates: Array.isArray(x) ? x : (z !== undefined ? [x, y, z] : [x, y]),
+  };
+  return json;
+};
+olMap.gen_point_json = function(x, y, z) {
+  return JSON.stringify(this.gen_point(x, y, z));
+};
+olMap.gen_polygon = function() {
+  let json = {
+    type: 'Polygon',
+    coordinates: [],
+  };
+  for(let i in arguments)
+  {
+    json.coordinates.push(arguments[i]);
+  }
+  return json;
+};
+olMap.gen_polygon_json = function(x, y, z) {
+  return JSON.stringify(this.gen_polygon(x, y, z));
+};

src/views/business/resourceLand/index.vue

@@ -0,0 +1,810 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container">
+              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+              <el-form-item label="标识码" prop="bsm">
+                <el-input v-model="queryParams.bsm" placeholder="请输入标识码" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="要素代码" prop="ysdm">
+                <el-input v-model="queryParams.ysdm" placeholder="请输入要素代码" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="地块名称" prop="dkmc">
+                <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item>
+              <el-form-item label="所有权性质" prop="syqxz">
+                <el-select v-model="queryParams.syqxz" placeholder="请选择所有权性质" clearable>
+                  <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="地块类别" prop="dklb">
+                <el-select v-model="queryParams.dklb" placeholder="请选择地块类别" clearable>
+                  <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="土地利用类型" prop="tdlylx">
+                <el-select v-model="queryParams.tdlylx" placeholder="请选择土地利用类型" clearable>
+                  <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="地力等级" prop="dldj">
+                <el-select v-model="queryParams.dldj" placeholder="请选择地力等级" clearable>
+                  <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="土地用途" prop="tdyt">
+                <el-select v-model="queryParams.tdyt" placeholder="请选择土地用途" clearable>
+                  <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="是否基本农田" prop="sfjbnt">
+                <el-select v-model="queryParams.sfjbnt" placeholder="请选择是否基本农田" clearable>
+                  <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <!-- <el-form-item label="指界人姓名" prop="zjrxm">
+                <el-input v-model="queryParams.zjrxm" placeholder="请输入指界人姓名" clearable @keyup.enter.native="handleQuery"/>
+              </el-form-item> -->
+              <el-form-item label="调查状态" prop="surveyStatus">
+                <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>
+                  <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:resourceLand:add']">新增</el-button>
+              </el-col>
+              <!--
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:resourceLand:edit']">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:resourceLand:remove']">删除</el-button>
+              </el-col>
+              -->
+
+              <el-col :span="1.5">
+                  <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:resourceLand:import']">导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:resourceLand:export']">导出</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                  <el-button type="success" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:resourceLand:print']">打印</el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+
+              <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+            <el-table v-loading="loading" :data="resourceLandList" >
+              <el-table-column label="区域位置名称" align="center" prop="deptName" />
+                <!--<el-table-column type="selection" width="55" align="center" />-->
+              <el-table-column label="标识码" align="center" prop="bsm" />
+              <el-table-column label="要素代码" align="center" prop="ysdm" />
+              <el-table-column label="地块代码" align="center" prop="dkbm" />
+              <el-table-column label="地块名称" align="center" prop="dkmc" />
+              <el-table-column label="地块四至" align="center">
+                <el-table-column label="东至" align="center" prop="dkdz" />
+                <el-table-column label="西至" align="center" prop="dkxz" />
+                <el-table-column label="南至" align="center" prop="dknz" />
+                <el-table-column label="北至" align="center" prop="dkbz" />
+              </el-table-column>
+              <!-- <el-table-column label="所有权性质" align="center" prop="syqxz">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.ownership_type" :value="scope.row.syqxz"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="地块类别" align="center" prop="dklb">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_type" :value="scope.row.dklb"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="土地利用类型" align="center" prop="tdlylx">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_use" :value="scope.row.tdlylx"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="地力等级" align="center" prop="dldj">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_grade_type" :value="scope.row.dldj"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="土地用途" align="center" prop="tdyt">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.land_use_type" :value="scope.row.tdyt"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="是否基本农田" align="center" prop="sfjbnt">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.sfjbnt"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="备注信息" align="center" prop="dkbzxx" />
+              <el-table-column label="指界人姓名" align="center" prop="zjrxm" />
+              <el-table-column label="空间坐标" align="center" prop="kjzb" /> 
+              <el-table-column label="实测面积(㎡)" align="center" prop="scmj" />-->
+              <el-table-column label="实测面积(亩)" align="center" prop="scmjm" />
+              <!-- <el-table-column label="地块轮廓坐标" align="center" prop="theGeom" />
+              <el-table-column label="fid (这个不用管)" align="center" prop="fid" /> -->
+              <el-table-column label="调查状态" align="center" prop="surveyStatus">
+                <template slot-scope="scope">
+                  <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/>
+                </template>
+              </el-table-column>
+              <!-- <el-table-column label="部门级联代码" align="center" prop="importCode" /> -->
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:resourceLand:query']">查看</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:resourceLand:edit']">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:resourceLand:remove']">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页插件 -->
+            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+    <!-- 导入EXCEL组件 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip text-left" slot="tip">
+                <div class="el-upload__tip" slot="tip">
+                    <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块属性
+                </div>
+                <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+            </div>
+        </el-upload>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitFileForm">确 定</el-button>
+            <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+    </el-dialog>
+    <!-- 添加或修改地块属性对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="120px">
+        <el-form-item label="标识码" prop="bsm">
+            <el-input-number v-model="form.bsm" placeholder="请输入标识码" controls-position="right"  />
+        </el-form-item>
+        <el-form-item label="要素代码" prop="ysdm">
+            <el-input v-model="form.ysdm" placeholder="请输入要素代码"  show-word-limit :maxlength="6"/>
+        </el-form-item>
+        <el-form-item label="地块代码" prop="dkbm">
+            <el-input v-model="form.dkbm" placeholder="<自动生成>"  show-word-limit :maxlength="50" disabled/>
+        </el-form-item>
+        <el-form-item label="地块名称" prop="dkmc">
+            <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="所有权性质" prop="syqxz">
+          <el-select v-model="form.syqxz" placeholder="请选择所有权性质">
+            <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地块类别" prop="dklb">
+          <el-select v-model="form.dklb" placeholder="请选择地块类别">
+            <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="土地利用类型" prop="tdlylx">
+          <el-select v-model="form.tdlylx" placeholder="请选择土地利用类型">
+            <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地力等级" prop="dldj">
+          <el-select v-model="form.dldj" placeholder="请选择地力等级">
+            <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="土地用途" prop="tdyt">
+          <el-select v-model="form.tdyt" placeholder="请选择土地用途">
+            <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否基本农田" prop="sfjbnt">
+          <el-select v-model="form.sfjbnt" placeholder="请选择是否基本农田">
+            <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="地块东至" prop="dkdz">
+            <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块西至" prop="dkxz">
+            <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块南至" prop="dknz">
+            <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块北至" prop="dkbz">
+            <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="指界人姓名" prop="zjrxm">
+            <el-input v-model="form.zjrxm" placeholder="请输入指界人姓名"  show-word-limit :maxlength="100"/>
+        </el-form-item>
+        <el-form-item label="空间坐标" prop="kjzb">
+            <el-input v-model="form.kjzb" placeholder="请输入空间坐标"  show-word-limit :maxlength="254"/>
+        </el-form-item>
+        <el-form-item label="实测面积( ㎡)" prop="scmj">
+            <el-input-number v-model="form.scmj" placeholder="请输入实测面积( ㎡)" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="实测面积" prop="scmjm">
+            <el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right"   :precision="3"/>
+        </el-form-item>
+        <el-form-item label="备注信息" prop="dkbzxx">
+          <el-input v-model="form.dkbzxx" type="textarea" :autosize="{ minRows: 2, maxRows: 3}"  :maxlength="200" show-word-limit placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="调查状态" prop="surveyStatus">
+          <el-radio-group v-model="form.surveyStatus">
+            <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <MapField style="height: 550px;" :allowDraw="true" v-model="form.theGeomJson" :coord="mapCenterLocation" type="1"/>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" v-if="diglogStatus" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listResourceLand, getResourceLand, delResourceLand, addResourceLand, updateResourceLand, printResourceLand } from "@/api/business/resourceLand"
+import { getToken } from "@/utils/auth"
+import { deptTreeSelect } from "@/api/system/user"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+import MapField from "@/components/house/MapField";
+export default {
+  name: "ResourceLand",
+  dicts: ['ownership_type', 'land_use_type', 'survey_status', 'land_grade_type', 'sys_yes_no', 'land_type', 'land_use'],
+  components: { Treeselect, Splitpanes, Pane,MapField },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 遮罩按钮新增点击状态
+      diglogStatus: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 地块属性表格数据
+      resourceLandList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 项目路径
+      baseRoutingUrl: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        bsm: null,
+        ysdm: null,
+        dkmc: null,
+        syqxz: null,
+        dklb: null,
+        tdlylx: null,
+        dldj: null,
+        tdyt: null,
+        sfjbnt: null,
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        dkbzxx: null,
+        zjrxm: null,
+        kjzb: null,
+        scmj: null,
+        scmjm: null,
+        theGeom: null,
+        fid: null,
+        surveyStatus: null,
+        importCode: null,
+        deptName: null,
+      },
+      // 表单参数
+      form: {},
+      // 遮罩按钮新增点击状态
+      diglogStatus: true,
+      // 部门名称
+      deptName: undefined,
+      // 所有部门树选项
+      deptOptions: undefined,
+      // 过滤掉已禁用部门树选项
+      enabledDeptOptions: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      map: "",                        // 地图
+      mapGeoServerUrl: "",            // geoserver地址
+      mapCenterLocation: [],          // 地图中心坐标
+      landLayerName: "",              // 地块图层名称
+      // 表单校验
+      rules: {
+        dkmc: [
+          { required: true, message: "地块名称不能为空", trigger: "blur" }
+        ],
+        scmjm: [
+          { required: true, message: "实测面积不能为空", trigger: "blur" }
+        ],
+        surveyStatus: [
+          { required: true, message: "调查状态不能为空", trigger: "change" }
+        ],
+        importCode: [
+          { required: true, message: "部门级联代码不能为空", trigger: "blur" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/resourceLand/importData"
+      },
+
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+    // 获取geoserver的地址
+    this.getGeoServerUrl();
+    // 获取地块图层名称
+    this.getLandLayerName();
+    // 获取村边界的图层名称
+    // this.getVillageBorderLayerName();
+    // 获取当前部门的位置
+    this.getCurrentDeptLocation();
+  },
+  methods: {
+    /** 查询地块属性列表 */
+    getList() {
+      this.loading = true
+      listResourceLand(this.queryParams).then(response => {
+        this.resourceLandList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 获取geoserver的地址
+    getGeoServerUrl() {
+      getConfigKey("system.geoServer.url").then(response => {
+        this.mapGeoServerUrl = response.msg;
+      });
+    },
+    // 获取地块图层名称
+    getLandLayerName() {
+      getConfigKey("geoserver.layer.dk").then(response => {
+        this.landLayerName = response.msg;
+      });
+    },
+    // 获取村边界的图层名称
+    /* getVillageBorderLayerName() {
+      getConfigKey("geoserver.layer.villageBorder").then(response => {
+        this.villageBorderLayerName = response.msg;
+      });
+    }, */
+    // 获取当前部门的位置
+    getCurrentDeptLocation() {
+      getCurrentDept().then(response => {
+        let dept = response.data;
+        if (dept.lng && dept.lat) {
+          this.mapCenterLocation = [dept.lng, dept.lat];
+        } else {
+          this.mapCenterLocation = [116.391458, 39.902377];
+        }
+      });
+    },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data
+        this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+      })
+    },
+    // 过滤禁用的部门
+    filterDisabledDept(deptList) {
+      return deptList.filter(dept => {
+        if (dept.disabled) {
+          return false
+        }
+        if (dept.children && dept.children.length) {
+          dept.children = this.filterDisabledDept(dept.children)
+        }
+        return true
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id
+      this.handleQuery()
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.open = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        bsm: null,
+        ysdm: null,
+        dkbm: null,
+        dkmc: null,
+        syqxz: null,
+        dklb: null,
+        tdlylx: null,
+        dldj: null,
+        tdyt: null,
+        sfjbnt: null,
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        dkbzxx: null,
+        zjrxm: null,
+        kjzb: null,
+        scmj: null,
+        scmjm: null,
+        theGeom: null,
+        fid: null,
+        surveyStatus: null,
+        importCode: null,
+        deptName: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        theGeom: null,
+        theGeomJson: null
+      }
+      this.resetForm("form")
+      // 防止表单提交失败再次打开按钮隐藏
+      this.diglogStatus = true;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.queryParams.deptId = undefined
+      this.$refs.tree.setCurrentKey(null)
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.dkbm)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加地块属性"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const dkbm = row.dkbm || this.ids
+      getResourceLand(dkbm).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改地块属性"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      this.diglogStatus = false;
+      const dkbm = row.dkbm || this.ids
+      getResourceLand(dkbm).then(response => {
+          this.form = response.data;
+          this.open = true;
+          this.title = "查看地块属性";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.theGeomJson && this.form.theGeomJson.startsWith('[')) {
+            this.form.theGeom = this.form.theGeomJson;
+          }
+          this.diglogStatus = false;
+          if (this.form.dkbm != null) {
+            updateResourceLand(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+              this.diglogStatus = true;
+            }).catch(() => this.diglogStatus = true);
+          } else {
+            addResourceLand(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+              this.diglogStatus = true;
+            }).catch(() => this.diglogStatus = true);
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dkbms = row.dkbm || this.ids
+      this.$modal.confirm('是否确认删除地块属性编号为"' + dkbms + '"的数据项？').then(function() {
+        return delResourceLand(dkbms)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/resourceLand/export', {
+        ...this.queryParams
+      }, `地块属性_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printResourceLand(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "地块属性导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/resourceLand/importTemplate', {
+        }, `resourceLand_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+    handleMap(row) {
+      this.openMap = true;
+      this.map = "";
+      setTimeout(() => {
+        this.drawMap(row.theGeomJson);
+      }, 500);
+    },
+    drawMap(theGeomJson) {
+      document.getElementById("landMapWrap").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: "landMapWrap",
+        view: new ol.View({
+          center: ol.proj.fromLonLat(this.mapCenterLocation), // 地图中心坐标
+          zoom: 13.5,
+          minZoom: 1, //地图缩小限制
+          maxZoom: 18, //地图放大限制
+          // extent: [13481224.75161,5667110.83528,13811063.06278,5880284.11416]
+        }),
+      });
+      // 添加全部的地块图层
+      const deptId = this.$store.state.user.loginDeptId;
+      this.addLandLayer(deptId);
+      // 添加选中的地块图层
+      this.addSelectedLandLayer(theGeomJson);
+    },
+    // 添加全部的地块图层
+    addLandLayer(deptId) {
+      const landLayer = new ol.layer.Image({
+        source: new ol.source.ImageWMS({
+          url: this.mapGeoServerUrl + '/wms',
+          params: {
+            LAYERS: this.landLayerName,
+            cql_filter: "dept_id = '" + deptId + "'",
+            SRID: 3857,
+          }
+        }),
+        name: 'landLayer'
+      });
+      this.map.getLayers().insertAt(3, landLayer);
+      // this.map.addLayer(landLayer);
+    },
+    // 添加选中的地块图层
+    addSelectedLandLayer(theGeomJson) {
+      if (theGeomJson) {
+        const selectedLandLayer = new ol.layer.Vector({
+          source: new ol.source.Vector({
+            features: new ol.format.GeoJSON().readFeatures(theGeomJson),
+          }),
+          name: 'selectedLandLayer',
+          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.getLayers().insertAt(4, selectedLandLayer);
+        this.map.getView().setCenter(ol.extent.getCenter(selectedLandLayer.getSource().getExtent()));
+        this.map.getView().setZoom(18);
+      }
+    }
+
+  }
+}
+</script>

src/views/business/resourceOperation/index.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="地块代码" prop="dkbm">
+        <el-input v-model="queryParams.dkbm" placeholder="请输入地块代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="地块名称" prop="dkmc">
+        <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="地块东至" prop="dkdz">
+        <el-input v-model="queryParams.dkdz" placeholder="请输入地块东至" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="地块西至" prop="dkxz">
+        <el-input v-model="queryParams.dkxz" placeholder="请输入地块西至" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="地块南至" prop="dknz">
+        <el-input v-model="queryParams.dknz" placeholder="请输入地块南至" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="地块北至" prop="dkbz">
+        <el-input v-model="queryParams.dkbz" placeholder="请输入地块北至" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="经营面积(亩)" prop="jymj">
+        <el-input v-model="queryParams.jymj" placeholder="请输入经营面积(亩)" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="经营方式" prop="jyfs">
+        <el-input v-model="queryParams.jyfs" placeholder="请输入经营方式" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="经营对象名称" prop="jydxmc">
+        <el-input v-model="queryParams.jydxmc" placeholder="请输入经营对象名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="经营开始时间" prop="jykssj">
+        <el-date-picker clearable v-model="queryParams.jykssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营开始时间"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="经营结束时间" prop="jyjssj">
+        <el-date-picker clearable v-model="queryParams.jyjssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营结束时间"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="承包金额(元)" prop="cbje">
+        <el-input v-model="queryParams.cbje" placeholder="请输入承包金额(元)" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="备注" prop="bz">
+        <el-input v-model="queryParams.bz" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="实物图" prop="dkImg">
+        <el-input v-model="queryParams.dkImg" placeholder="请输入实物图" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="调查状态 字典 survey_status" prop="surveyStatus">
+        <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态 字典 survey_status" clearable>
+          <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="部门级联代码" prop="importCode">
+        <el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="区域位置名称" prop="deptName">
+        <el-input v-model="queryParams.deptName" placeholder="请输入区域位置名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:resourceOperation:add']">新增</el-button>
+      </el-col>
+      <!--
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:resourceOperation:edit']">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:resourceOperation:remove']">删除</el-button>
+      </el-col>
+      -->
+
+      <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['business:resourceOperation:import']">导入</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:resourceOperation:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+          <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['business:resourceOperation:print']">打印</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+      <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->
+    <el-table v-loading="loading" :data="resourceOperationList" border>
+        <!--<el-table-column type="selection" width="55" align="center" />-->
+      <el-table-column label="id" align="center" prop="id"  min-width="60"/>
+      <el-table-column label="地块代码" align="center" prop="dkbm"  min-width="60"/>
+      <el-table-column label="地块名称" align="center" prop="dkmc" />
+      <el-table-column label="地块东至" align="center" prop="dkdz" />
+      <el-table-column label="地块西至" align="center" prop="dkxz" />
+      <el-table-column label="地块南至" align="center" prop="dknz" />
+      <el-table-column label="地块北至" align="center" prop="dkbz" />
+      <el-table-column label="经营面积(亩)" align="center" prop="jymj" />
+      <el-table-column label="经营方式" align="center" prop="jyfs" />
+      <el-table-column label="经营对象名称" align="center" prop="jydxmc" />
+    <el-table-column label="经营开始时间" align="center" prop="jykssj" />
+    <el-table-column label="经营结束时间" align="center" prop="jyjssj" />
+      <el-table-column label="承包金额(元)" align="center" prop="cbje" />
+      <el-table-column label="备注" align="center" prop="bz" />
+      <el-table-column label="实物图" align="center" prop="dkImg" />
+      <el-table-column label="调查状态 字典 survey_status" align="center" prop="surveyStatus">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.surveyStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="部门级联代码" align="center" prop="importCode" />
+      <el-table-column label="区域位置名称" align="center" prop="deptName" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['business:resourceOperation:query']">查看</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:resourceOperation:edit']">修改</el-button>
+          <el-dropdown size="mini" v-hasPermi="['business:resourceOperation:remove']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown" style="padding: 5px">
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:resourceOperation:remove']">删除</el-button>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页插件 -->
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+
+     <!-- 导入EXCEL组件 -->
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+          <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip text-left" slot="tip">
+                  <div class="el-upload__tip" slot="tip">
+                      <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块经营
+                  </div>
+                  <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>
+                  <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+              </div>
+          </el-upload>
+          <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitFileForm">确 定</el-button>
+              <el-button @click="upload.open = false">取 消</el-button>
+          </div>
+      </el-dialog>
+
+      <!-- 查看地块经营对话框 -->
+      <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>
+         <el-descriptions id="printDetail" :column="descColumn" border :labelStyle="{width: `${descLabelWidth}%`}" :contentStyle="{width: `${(100 / descColumn) - descLabelWidth}%`}">
+           <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item>
+           <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item>
+           <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item>
+           <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item>
+           <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item>
+           <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item>
+           <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item>
+           <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item>
+           <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item>
+           <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item>
+           <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item>
+           <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item>
+           <el-descriptions-item label="实物图">{{ form.dkImg }}</el-descriptions-item>
+           <el-descriptions-item label="调查状态 字典 survey_status">{{ form.surveyStatus }}</el-descriptions-item>
+           <el-descriptions-item label="部门级联代码">{{ form.importCode }}</el-descriptions-item>
+           <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item>
+         </el-descriptions>
+          <!-- 弹框操作按钮 -->
+         <div slot="footer" class="dialog-footer">
+             <el-button @click="doPrint">打 印</el-button>
+             <el-button @click="cancelDetail">关 闭</el-button>
+         </div>
+      </el-dialog>
+
+    <!-- 添加或修改地块经营对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="地块名称" prop="dkmc">
+            <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块东至" prop="dkdz">
+            <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块西至" prop="dkxz">
+            <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块南至" prop="dknz">
+            <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="地块北至" prop="dkbz">
+            <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+        <el-form-item label="经营面积(亩)" prop="jymj">
+            <el-input-number v-model="form.jymj" placeholder="请输入经营面积(亩)" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="经营方式" prop="jyfs">
+            <el-input v-model="form.jyfs" placeholder="请输入经营方式"  show-word-limit :maxlength="1"/>
+        </el-form-item>
+        <el-form-item label="经营对象名称" prop="jydxmc">
+            <el-input v-model="form.jydxmc" placeholder="请输入经营对象名称"  show-word-limit :maxlength="200"/>
+        </el-form-item>
+        <el-form-item label="经营开始时间" prop="jykssj">
+          <el-date-picker clearable v-model="form.jykssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营开始时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="经营结束时间" prop="jyjssj">
+          <el-date-picker clearable v-model="form.jyjssj" type="date" value-format="yyyy-MM-dd" placeholder="请选择经营结束时间"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="承包金额(元)" prop="cbje">
+            <el-input-number v-model="form.cbje" placeholder="请输入承包金额(元)" controls-position="right"   :precision="2"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="bz">
+            <el-input v-model="form.bz" placeholder="请输入备注"  show-word-limit :maxlength="255"/>
+        </el-form-item>
+        <el-form-item label="实物图" prop="dkImg">
+            <el-input v-model="form.dkImg" placeholder="请输入实物图"  show-word-limit :maxlength="255"/>
+        </el-form-item>
+        <el-form-item label="调查状态 字典 survey_status" prop="surveyStatus">
+          <el-radio-group v-model="form.surveyStatus">
+            <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="部门级联代码" prop="importCode">
+            <el-input v-model="form.importCode" placeholder="请输入部门级联代码"  show-word-limit :maxlength="20"/>
+        </el-form-item>
+        <el-form-item label="区域位置名称" prop="deptName">
+            <el-input v-model="form.deptName" placeholder="请输入区域位置名称"  show-word-limit :maxlength="50"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listResourceOperation, getResourceOperation, getResourceOperationDetail, delResourceOperation, addResourceOperation, updateResourceOperation, printResourceOperation } from "@/api/business/resourceOperation"
+import { getToken } from "@/utils/auth"
+export default {
+  name: "ResourceOperation",
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 地块经营表格数据
+      resourceOperationList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 详情组件列数
+      descColumn: 2,
+      // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}
+      descLabelWidth: 15,
+      // 对话框显示只读的详情
+      viewOpen: false,
+      // 项目路径
+      baseRoutingUrll: process.env.VUE_APP_BASE_API,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+       // 查询排序
+       //orderByColumn: "id",
+       //isAsc: "desc",
+       // 翻译字典
+       //toTranslateDict: "1",
+        dkbm: null,
+        dkmc: null,
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        jymj: null,
+        jyfs: null,
+        jydxmc: null,
+        jykssj: null,
+        jyjssj: null,
+        cbje: null,
+        bz: null,
+        dkImg: null,
+        surveyStatus: null,
+        importCode: null,
+        deptName: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dkmc: [
+          { required: true, message: "地块名称不能为空", trigger: "blur" }
+        ],
+        surveyStatus: [
+          { required: true, message: "调查状态 字典 survey_status不能为空", trigger: "change" }
+        ],
+        importCode: [
+          { required: true, message: "部门级联代码不能为空", trigger: "blur" }
+        ],
+        createBy: [
+          { required: true, message: "创建者不能为空", trigger: "blur" }
+        ],
+        createTime: [
+          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        ],
+      },
+      // EXCEL导入
+      upload: {
+          // 是否显示弹出层（用户导入）
+          open: false,
+          // 弹出层标题（用户导入）
+          title: "",
+          // 是否禁用上传
+          isUploading: false,
+          // 是否更新已经存在的用户数据
+          updateSupport: 0,
+          // 设置上传的请求头部
+          headers: { Authorization: "Bearer " + getToken() },
+          // 上传的地址
+          url: process.env.VUE_APP_BASE_API + "/business/resourceOperation/importData"
+      },
+
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询地块经营列表 */
+    getList() {
+      this.loading = true
+      listResourceOperation(this.queryParams).then(response => {
+        this.resourceOperationList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    cancelDetail() {
+        this.viewOpen = false
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        dkbm: null,
+        dkmc: null,
+        dkdz: null,
+        dkxz: null,
+        dknz: null,
+        dkbz: null,
+        jymj: null,
+        jyfs: null,
+        jydxmc: null,
+        jykssj: null,
+        jyjssj: null,
+        cbje: null,
+        bz: null,
+        dkImg: null,
+        surveyStatus: null,
+        importCode: null,
+        deptName: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      }
+      this.resetForm("form")
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = "添加地块经营"
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const id = row.id || this.ids
+      getResourceOperation(id).then(response => {
+        this.form = response.data
+        this.open = true
+        this.title = "修改地块经营"
+      })
+    },
+    /** 查看按钮操作 */
+    handleLook(row) {
+      const id = row.id || this.ids
+      getResourceOperationDetail(id).then(response => {
+          this.form = response.data;
+          this.viewOpen = true;
+          this.title = "查看地块经营";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateResourceOperation(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功")
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addResourceOperation(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功")
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal.confirm('是否确认删除地块经营编号为"' + ids + '"的数据项？').then(function() {
+        return delResourceOperation(ids)
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("删除成功")
+      }).catch(() => {})
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('business/resourceOperation/export', {
+        ...this.queryParams
+      }, `地块经营_${new Date().getTime()}.xlsx`)
+    },
+    /** 打印表单 */
+    doPrint() {
+        const originalTitle = document.title;
+        try {
+            document.title = this.title || '打印详情';
+            const printElement = document.getElementById('printDetail');
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            printFrame.onload = function() {
+                try {
+                    const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;
+                    const contentClone = printElement.cloneNode(true);
+                    const style = document.createElement('style');
+                    style.innerHTML = `
+                      @page {
+                        size: auto;
+                        margin: 10mm;
+                      }
+                      body {
+                        font-family: Arial, sans-serif;
+                        line-height: 1.5;
+                        margin: 0;
+                        padding: 0;
+                      }
+                      .el-descriptions {
+                        width: 100% !important;
+                      }
+                      .el-descriptions-item__label {
+                        width: ${this.descLabelWidth}% !important;
+                      }
+                      .el-descriptions-item__content {
+                        width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;
+                      }
+                      /* 确保图片在打印时显示完整 */
+                      img, .el-image {
+                        max-width: 100% !important;
+                        height: auto !important;
+                      }
+                    `;
+                    frameDoc.head.appendChild(style);
+                    frameDoc.body.appendChild(contentClone);
+                    setTimeout(() => {
+                        printFrame.contentWindow.focus();
+                        printFrame.contentWindow.print();
+                        setTimeout(() => {
+                            document.body.removeChild(printFrame);
+                            document.title = originalTitle;
+                        }, 1000);
+                    }, 500);
+                } catch (e) {
+                    document.body.removeChild(printFrame);
+                    document.title = originalTitle;
+                    this.$message.error('打印过程中发生错误');
+                }
+            };
+            document.body.appendChild(printFrame);
+        } catch (e) {
+            document.title = originalTitle;
+            this.$message.error('打印过程中发生错误');
+        }
+    },
+    /** 打印按钮操作 */
+    handlePrint() {
+        printResourceOperation(this.queryParams).then(response => {})
+    },
+    /* 导入EXCEL组件 */
+    handleImport() {
+        this.upload.title = "地块经营导入"
+        this.upload.open = true
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+        this.download('business/resourceOperation/importTemplate', {
+        }, `地块经营_template.xlsx`)
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+        this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+        this.upload.open = false
+        this.upload.isUploading = false
+        this.$refs.upload.clearFiles()
+        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+        this.getList()
+    },
+    // 提交上传文件
+    submitFileForm() {
+        this.$refs.upload.submit()
+    },
+
+
+  }
+}
+</script>